<!DOCTYPE html>
<html>

<head>
    <base href="/">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, viewport-fit=cover, initial-scale=1, maximum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="darkreader-lock">
    <link href="webfonts/NotoSans/stylesheet.css" rel="stylesheet">
    <!-- fontawesome webfonts-->
    <link href="css/fontawesome.css" rel="stylesheet">
    <link href="css/solid.css" rel="stylesheet">
    <link href="css/jquery-ui.min.css" rel="stylesheet">
    <link href="css/bright.min.css" rel="stylesheet">
    <link href="css/cropper.min.css" rel="stylesheet">
    <link href="css/toastr.min.css" rel="stylesheet">
    <link href="css/select2.min.css" rel="stylesheet">

    <link rel="apple-touch-icon" sizes="57x57" href="img/apple-icon-57x57.png" />
    <link rel="apple-touch-icon" sizes="72x72" href="img/apple-icon-72x72.png" />
    <link rel="apple-touch-icon" sizes="114x114" href="img/apple-icon-114x114.png" />
    <link rel="apple-touch-icon" sizes="144x144" href="img/apple-icon-144x144.png" />

    <script src="scripts/jquery-3.5.1.min.js"></script>
    <script src="scripts/jquery-ui.min.js"></script>
    <script src="scripts/jquery.transit.min.js"></script>
    <script src="scripts/jquery-cookie-1.4.1.min.js"></script>
    <script src="scripts/showdown.min.js"></script>
    <script src="scripts/showdown-katex.min.js"></script>
    <script src="scripts/popper.js"></script>
    <script src="scripts/purify.min.js"></script>
    <script src="scripts/highlight.min.js"></script>
    <script src="scripts/moment.min.js"></script>
    <script src="scripts/cropper.min.js"></script>
    <script src="scripts/jquery-cropper.min.js"></script>
    <script src="scripts/toastr.min.js"></script>
    <script src="scripts/fuse.js"></script>
    <script src="scripts/select2.min.js"></script>
    <script src="scripts/seedrandom.min.js"></script>
    <script src="scripts/droll.js"></script>
    <script type="module" src="scripts/eventemitter.js"></script>
    <script type="module" src="scripts/power-user.js"></script>
    <script type="module" src="scripts/swiped-events.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" href="css/bg_load.css">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <script>
        function applyLocale() {
            var language = navigator.language || navigator.userLanguage;
            language = language.toLowerCase();
            console.log(language)
            //load the appropriate language file
            $.getJSON("i18n.json", function (data) {
                console.log(data)
                if (data.lang.indexOf(language) < 0) language = "en";
                console.log(language)
                //find all the elements with `data-i18n` attribute
                $("[data-i18n]").each(function () {
                    //read the translation from the language data
                    const keys = $(this).data("i18n").split(';'); // Multi-key entries are ; delimited
                    for (const key of keys) {
                        const attrmatch = key.match(/\[(\S+)\](.+)/); // [attribute]key
                        if (attrmatch) { // attribute-tagged key
                            const locval = data?.[language]?.[attrmatch[2]];
                            if (locval) {
                                $(this).attr(attrmatch[1], locval);
                            }
                        } else { // No attribute tag, treat as 'text'
                            const locval = data?.[language]?.[key];
                            if (locval) {
                                $(this).text(locval);
                            }
                        }
                    }
                });
            });
        }
        $(document).ready(applyLocale);
        window["applyLocale"] = applyLocale;
    </script>
    <script type=module src="script.js"></script>

    <script type="module" src="scripts/world-info.js"></script>
    <script type="module" src="scripts/group-chats.js"></script>
    <script type="module" src="scripts/kai-settings.js"></script>
    <script type="module" src="scripts/textgen-settings.js"></script>
    <script type="module" src="scripts/bookmarks.js"></script>
    <script type="module" src="scripts/horde.js"></script>
    <script type="module" src="scripts/RossAscends-mods.js"></script>
    <script type="module" src="scripts/slash-commands.js"></script>
    <script type="module" src="scripts/tags.js"></script>
    <script type="module" src="scripts/secrets.js"></script>
    <script type="module" src="scripts/context-template.js"></script>
    <script type="module" src="scripts/extensions.js"></script>
    <script type="module" src="scripts/authors-note.js"></script>
    <script type="text/javascript" src="scripts/toolcool-color-picker.js"></script>

    <title>SillyTavern</title>
</head>

<body class="no-blur">

    <div id="bg_custom"></div>
    <div id="bg1"></div>

    <!-- top bar central settings buttons -->
    <div id="top-bar">
    </div>
    <div id="top-settings-holder">
        <!-- background selection menu -->

        <div id="ai-config-button" class="drawer">
            <div class="drawer-toggle drawer-header">
                <div id="leftNavDrawerIcon" class="drawer-icon fa-solid fa-sliders  closedIcon" data-i18n="[title]AI Response Configuration" title="AI Response Configuration"></div>
            </div>

            <div id="left-nav-panel" class="drawer-content fillLeft closedDrawer">
                <div id="left-nav-panelheader" class="fa-solid fa-grip drag-grabber"></div>
                <div id="lm_button_panel_pin_div" data-i18n="[title]AI Configuration panel will stay open" title="Locked = AI Configuration panel will stay open">
                    <input type="checkbox" id="lm_button_panel_pin">
                    <label for="lm_button_panel_pin">
                        <div class="unchecked fa-solid fa-unlock "></div>
                        <div class="checked fa-solid fa-lock "></div>
                    </label>
                </div>
                <div data-i18n="clickslidertips" class="toggle-description flex-container justifyLeft wide100p editable-slider-notification">
                    Click slider numbers to input manually.
                </div>
                <div class="scrollableInner">
                    <div class="flex-container" id="ai_response_configuration">
                        <div id="respective-presets-block" class="width100p">
                            <div id="kobold_api-presets">
                                <h3><span data-i18n="kobldpresets">Kobold Presets</span>
                                    <a href="https://docs.sillytavern.app/usage/api-connections/koboldai/" class="notes-link" target="_blank">
                                        <span class="note-link-span">?</span>
                                    </a>
                                </h3>
                                <select id="settings_perset">
                                    <option value="gui" data-i18n="guikoboldaisettings">GUI KoboldAI Settings</option>
                                </select>
                            </div>
                            <div id="novel_api-presets">
                                <h3>
                                    <span data-i18n="novelaipreserts">NovelAI Presets</span>
                                    <a href="https://docs.sillytavern.app/usage/api-connections/novelai/" class="notes-link" target="_blank">
                                        <span class="note-link-span">?</span>
                                    </a>
                                </h3>
                                <select id="settings_perset_novel">
                                    <option value="gui" data-i18n="default">Default</option>
                                </select>
                            </div>
                            <div id="openai_api-presets">
                                <div>
                                    <h4><span data-i18n="openaipresets">Chat Completion Presets</span></h4>
                                    <div class="openai_preset_buttons">
                                        <select id="settings_perset_openai">
                                            <option value="gui" data-i18n="default">Default</option>
                                        </select>
                                        <i id="update_oai_preset" class="menu_button fa-solid fa-save" title="Update current preset" data-i18n="[title]Update current preset"></i>
                                        <i id="new_oai_preset" class="menu_button fa-solid fa-plus" title="Create new preset" data-i18n="[title]Create new preset"></i>
                                        <i title="Import preset" id="import_oai_preset" class="menu_button fa-solid fa-upload" data-i18n="[title]Import preset"></i>
                                        <i title="Export preset" id="export_oai_preset" class="menu_button fa-solid fa-download" data-i18n="[title]Export preset"></i>
                                        <i id="delete_oai_preset" class="menu_button fa-solid fa-trash-can" title="Delete the preset" data-i18n="[title]Delete the preset"></i>
                                        <input id="openai_preset_import_file" type="file" accept=".json,.settings" hidden />
                                    </div>
                                </div>
                            </div>
                            <div id="textgenerationwebui_api-presets">
                                <h3><span data-i18n="text gen webio(ooba)preset">Text Gen WebUI (ooba) presets</span>
                                </h3>
                                <select id="settings_preset_textgenerationwebui">
                                </select>
                            </div>
                            <hr>
                        </div>

                        <div id="common-gen-settings-block" class="width100p">
                            <div id="pro-settings-block">
                                <div id="amount_gen_block" class="range-block">
                                    <div class="range-block-title" data-i18n="response legth(tokens)">
                                        Response Length (tokens)
                                    </div>
                                    <div class="range-block-range-and-counter">
                                        <div class="range-block-range-and-counter">
                                            <div class="range-block-range">
                                                <input type="range" id="amount_gen" name="volume" min="16" max="1024" step="1">
                                            </div>
                                            <div class="range-block-counter" data-randomization-disabled="true">
                                                <div contenteditable="true" data-for="amount_gen" id="amount_gen_counter">
                                                    select
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div id="max_context_block" class="range-block">
                                    <div class="range-block-title" data-i18n="context size(tokens)">
                                        Context Size (tokens)
                                    </div>
                                    <div class="range-block-range-and-counter">
                                        <div class="range-block-range">
                                            <input type="range" id="max_context" name="volume" min="512" max="2048" step="1">
                                        </div>
                                        <div class="range-block-counter" data-randomization-disabled="true">
                                            <div contenteditable="true" data-for="max_context" id="max_context_counter">
                                                select
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="max_context_unlocked_block">
                                    <label class="checkbox_label">
                                        <input id="max_context_unlocked" type="checkbox" />
                                        <span data-i18n="unlocked">Unlocked</span>
                                    </label>
                                    <div id="max_context_unlocked_warning">
                                        <b class="neutral_warning" data-i18n="ATTENTION!">ATTENTION!</b>
                                        <span data-i18n="only select modls support context sizes greater than 2048 tokens. proceed only is you know you're doing">
                                            Only select models support context sizes greater than 2048 tokens.
                                            Proceed only if you know what you're doing.
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <hr>
                        </div>

                        <div id="respective-ranges-and-temps" class="width100p">
                            <div id="range_block">
                                <div class="range-block">
                                    <div class="range-block-title" data-i18n="temperature">
                                        Temperature
                                    </div>
                                    <div class="range-block-range-and-counter">
                                        <div class="range-block-range">
                                            <input type="range" id="temp" name="volume" min="0.1" max="2.0" step="0.01">
                                        </div>
                                        <div class="range-block-counter">
                                            <div contenteditable="true" data-for="temp" id="temp_counter">
                                                select
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="range-block">
                                    <div class="range-block-title" data-i18n="rep.pen">
                                        Rep. Pen.
                                    </div>
                                    <div class="range-block-range-and-counter">
                                        <div class="range-block-range">
                                            <input type="range" id="rep_pen" name="volume" min="1" max="1.5" step="0.01">
                                        </div>
                                        <div class="range-block-counter">
                                            <div contenteditable="true" data-for="rep_pen" id="rep_pen_counter">
                                                select
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="range-block">
                                    <div class="range-block-title" data-i18n="rep.pen range">
                                        Rep. Pen. Range
                                    </div>
                                    <div class="range-block-range-and-counter">
                                        <div class="range-block-range">
                                            <input type="range" id="rep_pen_range" name="volume" min="0" max="2048" step="1">
                                        </div>
                                        <div class="range-block-counter">
                                            <div contenteditable="true" data-for="rep_pen_range" id="rep_pen_range_counter">
                                                select
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <hr>
                                <div id="range_block">
                                    <div class="range-block">
                                        <label class="checkbox_label widthFreeExpand">
                                            <input id="streaming_kobold" type="checkbox" />
                                            <span data-i18n="Streaming">Streaming</span>
                                        </label>
                                        <div class="toggle-description justifyLeft">
                                            <span data-i18n="Display the response bit by bit as it is generated.">
                                                Display the response bit by bit as it is generated.</span><br>
                                            <span data-i18n="When this is off, responses will be displayed all at once when they are complete.">
                                                When this is off, responses will be displayed all at once when they are complete.
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div id="range_block_novel">
                                <div class="range-block">
                                    <label class="checkbox_label widthFreeExpand">
                                        <input id="streaming_novel" type="checkbox" />
                                        <span data-i18n="Streaming">Streaming</span>
                                    </label>
                                    <div class="toggle-description justifyLeft">
                                        <span data-i18n="Display the response bit by bit as it is generated.">
                                            Display the response bit by bit as it is generated.</span><br>
                                        <span data-i18n="When this is off, responses will be displayed all at once when they are complete.">
                                            When this is off, responses will be displayed all at once when they are complete.
                                        </span>
                                    </div>
                                </div>
                                <div class="range-block-title" data-i18n="temperature">
                                    Temperature
                                </div>
                                <div class="range-block-range-and-counter">
                                    <div class="range-block-range">
                                        <input type="range" id="temp_novel" name="volume" min="0.1" max="2.0" step="0.01">
                                    </div>
                                    <div class="range-block-counter">
                                        <div contenteditable="true" data-for="temp_novel" id="temp_counter_novel">
                                            select
                                        </div>
                                    </div>
                                </div>
                                <div class="range-block">
                                    <div class="range-block-title" data-i18n="rep.pen">
                                        Rep. Pen.
                                    </div>
                                    <div class="range-block-range-and-counter">
                                        <div class="range-block-range">
                                            <input type="range" id="rep_pen_novel" name="volume" min="1" max="1.5" step="0.01">
                                        </div>
                                        <div class="range-block-counter">
                                            <div contenteditable="true" data-for="rep_pen_novel" id="rep_pen_counter_novel">
                                                select
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="range-block">
                                    <div class="range-block-title" data-i18n="Rep. Pen. Range.">
                                        Rep. Pen. Range.
                                    </div>
                                    <div class="range-block-range-and-counter">
                                        <div class="range-block-range">
                                            <input type="range" id="rep_pen_size_novel" name="volume" min="0" max="2048" step="1">
                                        </div>
                                        <div class="range-block-counter">
                                            <div contenteditable="true" data-for="rep_pen_size_novel" id="rep_pen_size_counter_novel">
                                                select
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="range-block">
                                    <div class="range-block-title" data-i18n="Rep. Pen. Slope">
                                        Rep. Pen. Slope
                                    </div>
                                    <div class="range-block-range-and-counter">
                                        <div class="range-block-range">
                                            <input type="range" id="rep_pen_slope_novel" name="volume" min="0.01" max="10" step="0.01">
                                        </div>
                                        <div class="range-block-counter">
                                            <div contenteditable="true" data-for="rep_pen_slope_novel" id="rep_pen_slope_counter_novel">
                                                select
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="range-block">
                                    <div class="range-block-title" data-i18n="Rep. Pen. Freq.">
                                        Rep. Pen. Freq.
                                    </div>
                                    <div class="range-block-range-and-counter">
                                        <div class="range-block-range">
                                            <input type="range" id="rep_pen_freq_novel" name="volume" min="0" max="1" step="0.00001">
                                        </div>
                                        <div class="range-block-counter">
                                            <div contenteditable="true" data-for="rep_pen_freq_novel" id="rep_pen_freq_counter_novel">
                                                select
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="range-block">
                                    <div class="range-block-title" data-i18n="Rep. Pen. Presence">
                                        Rep. Pen. Presence
                                    </div>
                                    <div class="range-block-range-and-counter">
                                        <div class="range-block-range">
                                            <input type="range" id="rep_pen_presence_novel" name="volume" min="0" max="1" step="0.001">
                                        </div>
                                        <div class="range-block-counter">
                                            <div contenteditable="true" data-for="rep_pen_presence_novel" id="rep_pen_presence_counter_novel">
                                                select
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="range-block">
                                    <div class="range-block-title" data-i18n="Tail Free Sampling">
                                        Tail Free Sampling
                                    </div>
                                    <div class="range-block-range-and-counter">
                                        <div class="range-block-range">
                                            <input type="range" id="tail_free_sampling_novel" name="volume" min="0" max="1" step="0.001">
                                        </div>
                                        <div class="range-block-counter">
                                            <div contenteditable="true" data-for="tail_free_sampling_novel" id="tail_free_sampling_counter_novel">
                                                select
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div id="range_block_textgenerationwebui">
                                <div class="range-block">
                                    <div class="range-block-title" data-i18n="temperature">
                                        Temperature
                                    </div>
                                    <div class="range-block-range-and-counter">
                                        <div class="range-block-range">
                                            <input type="range" id="temp_textgenerationwebui" name="volume" min="0.1" max="2.0" step="0.01">
                                        </div>
                                        <div class="range-block-counter">
                                            <div contenteditable="true" data-for="temp_textgenerationwebui" id="temp_counter_textgenerationwebui">
                                                select
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="range-block">
                                    <div class="range-block-title" data-i18n="rep.pen">
                                        Rep. Pen.
                                    </div>
                                    <div class="range-block-range-and-counter">
                                        <div class="range-block-range">
                                            <input type="range" id="rep_pen_textgenerationwebui" name="volume" min="1" max="1.5" step="0.01">
                                        </div>
                                        <div class="range-block-counter">
                                            <div contenteditable="true" data-for="rep_pen_textgenerationwebui" id="rep_pen_counter_textgenerationwebui">
                                                select
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="range-block">
                                    <div class="range-block-title" data-i18n="Encoder Rep. Pen.">
                                        Encoder Rep. Pen.
                                    </div>
                                    <div class="range-block-range-and-counter">
                                        <div class="range-block-range">
                                            <input type="range" id="encoder_rep_pen_textgenerationwebui" name="volume" min="0.8" max="1.5" step="0.01" />
                                        </div>
                                        <div class="range-block-counter">
                                            <div contenteditable="true" data-for="encoder_rep_pen_textgenerationwebui" id="encoder_rep_pen_counter_textgenerationwebui">
                                                select
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="range-block">
                                    <div class="range-block-title" data-i18n="No Repeat Ngram Size">
                                        No Repeat Ngram Size
                                    </div>
                                    <div class="range-block-range-and-counter">
                                        <div class="range-block-range">
                                            <input type="range" id="no_repeat_ngram_size_textgenerationwebui" name="volume" min="0" max="20" step="1">
                                        </div>
                                        <div class="range-block-counter">
                                            <div contenteditable="true" data-for="no_repeat_ngram_size_textgenerationwebui" id="no_repeat_ngram_size_counter_textgenerationwebui">
                                                select
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="range-block">
                                    <div class="range-block-title" data-i18n="Min Length">
                                        Min Length
                                    </div>
                                    <div class="range-block-range-and-counter">
                                        <div class="range-block-range">
                                            <input type="range" id="min_length_textgenerationwebui" name="volume" min="0" max="2000" step="1" />
                                        </div>
                                        <div class="range-block-counter">
                                            <div contenteditable="true" data-for="min_length_textgenerationwebui" id="min_length_counter_textgenerationwebui">
                                                select
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div id="range_block_openai">
                                <div class="range-block" data-source="openai,claude">
                                    <div class="range-block-title justifyLeft" data-i18n="OpenAI Reverse Proxy">
                                        OpenAI / Claude Reverse Proxy
                                    </div>
                                    <div class="toggle-description justifyLeft">
                                        <span data-i18n="Alternative server URL (leave empty to use the default value).">
                                            Alternative server URL (leave empty to use the default value).<br>
                                        </span>
                                        <div id="ReverseProxyWarningMessage" class="reverse_proxy_warning">
                                            <b data-i18n="Remove your real OAI API Key from the API panel BEFORE typing anything into this box">
                                                Remove your real OAI API Key from the API panel BEFORE typing anything
                                                into this box.
                                            </b>
                                            <hr>
                                            <b data-i18n="We cannot provide support for problems encountered while using an unofficial OpenAI proxy">
                                                We cannot provide support for problems encountered while using an
                                                unofficial OpenAI proxy.

                                            </b>
                                        </div>
                                    </div>
                                    <div class="wide100p">
                                        <input id="openai_reverse_proxy" type="text" class="text_pole" placeholder="https://api.openai.com/v1" maxlength="100" />
                                    </div>
                                </div>
                                <div class="range-block" data-source="openai,claude">
                                    <div class="range-block-title justifyLeft">
                                        <label for="legacy_streaming" class="checkbox_label">
                                            <input id="legacy_streaming" type="checkbox" />
                                            <span data-i18n="Legacy Streaming Processing">
                                                Legacy Streaming Processing
                                            </span>
                                        </label>
                                    </div>
                                    <div class="toggle-description justifyLeft" data-i18n="Enable this if the streaming doesn't work with your proxy">
                                        Enable this if the streaming doesn't work with your proxy.
                                    </div>
                                </div>
                                <div class="range-block">
                                    <label class="checkbox_label">
                                        <input id="oai_max_context_unlocked" type="checkbox" />
                                        <span data-i18n="Unlocked Context Size">
                                            Unlocked Context Size
                                        </span>
                                    </label>
                                    <div class="toggle-description justifyLeft">
                                        <span data-i18n="Unrestricted maximum value for the context slider">
                                            Unrestricted maximum value for the context size slider. Enable only if you know
                                            what you're doing.
                                        </span>
                                    </div>
                                </div>
                                <div class="range-block">
                                    <div class="range-block-title" data-i18n="Context Size (tokens)">
                                        Context Size (tokens)
                                    </div>
                                    <div class="range-block-range-and-counter">
                                        <div class="range-block-range">
                                            <input type="range" id="openai_max_context" name="volume" min="512" max="4095" step="1">
                                        </div>
                                        <div class="range-block-counter" data-randomization-disabled="true">
                                            <div contenteditable="true" data-for="openai_max_context" id="openai_max_context_counter">
                                                select
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="range-block">
                                    <div class="range-block-title" data-i18n="Max Response Length (tokens)">
                                        Max Response Length (tokens)
                                    </div>
                                    <div class="wide100p">
                                        <input type="number" id="openai_max_tokens" name="openai_max_tokens" class="text_pole" min="50" max="1000">
                                    </div>
                                </div>
                                <div class="range-block" data-source="openai,claude,windowai,openrouter">
                                    <div class="range-block-title" data-i18n="Temperature">
                                        Temperature
                                    </div>

                                    <div class="range-block-range-and-counter">
                                        <div class="range-block-range">
                                            <input type="range" id="temp_openai" name="volume" min="0" max="2.0" step="0.01">
                                        </div>
                                        <div class="range-block-counter">
                                            <div contenteditable="true" data-for="temp_openai" id="temp_counter_openai">
                                                select</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="range-block" data-source="openai,openrouter">
                                    <div class="range-block-title" data-i18n="Frequency Penalty">
                                        Frequency Penalty
                                    </div>
                                    <div class="range-block-range-and-counter">
                                        <div class="range-block-range">
                                            <input type="range" id="freq_pen_openai" name="volume" min="-2" max="2" step="0.01">
                                        </div>
                                        <div class="range-block-counter">
                                            <div contenteditable="true" data-for="freq_pen_openai" id="freq_pen_counter_openai">
                                                select
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="range-block" data-source="openai,openrouter">
                                    <div class="range-block-title" data-i18n="Presence Penalty">
                                        Presence Penalty
                                    </div>
                                    <div class="range-block-range-and-counter">
                                        <div class="range-block-range">
                                            <input type="range" id="pres_pen_openai" name="volume" min="-2" max="2" step="0.01">
                                        </div>
                                        <div class="range-block-counter">
                                            <div contenteditable="true" data-for="pres_pen_openai" id="pres_pen_counter_openai">
                                                select
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="range-block" data-source="claude,openrouter">
                                    <div class="range-block-title" data-i18n="Top K">
                                        Top K
                                    </div>
                                    <div class="range-block-range-and-counter">
                                        <div class="range-block-range">
                                            <input type="range" id="top_k_openai" name="volume" min="0" max="200" step="1">
                                        </div>
                                        <div class="range-block-counter">
                                            <div contenteditable="true" data-for="top_k_openai" id="top_k_counter_openai">
                                                select
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="range-block" data-source="openai,claude,openrouter">
                                    <div class="range-block-title" data-i18n="Top-p">
                                        Top P
                                    </div>
                                    <div class="range-block-range-and-counter">
                                        <div class="range-block-range">
                                            <input type="range" id="top_p_openai" name="volume" min="0" max="1" step="0.01">
                                        </div>
                                        <div class="range-block-counter">
                                            <div contenteditable="true" data-for="top_p_openai" id="top_p_counter_openai">
                                                select
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <hr>
                        </div>

                        <div id="advanced-ai-config-block" class="width100p">
                            <div id="kobold_api-settings">
                                <div id="kobold-advanced-config">
                                    <div class="range-block">
                                        <div class="range-block-title" data-i18n="Top P">
                                            Top P
                                        </div>
                                        <div class="range-block-range-and-counter">
                                            <div class="range-block-range">
                                                <input type="range" id="top_p" name="volume" min="0" max="1" step="0.01">
                                            </div>
                                            <div class="range-block-counter">
                                                <div contenteditable="true" data-for="top_p" id="top_p_counter">
                                                    select
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="range-block">
                                        <div class="range-block-title" data-i18n="Top A">
                                            Top A
                                        </div>
                                        <div class="range-block-range-and-counter">
                                            <div class="range-block-range">
                                                <input type="range" id="top_a" name="volume" min="0" max="1" step="0.01">
                                            </div>
                                            <div class="range-block-counter">
                                                <div contenteditable="true" data-for="top_a" id="top_a_counter">
                                                    select
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="range-block">
                                        <div class="range-block-title" data-i18n="Top K">
                                            Top K
                                        </div>
                                        <div class="range-block-range-and-counter">
                                            <div class="range-block-range">
                                                <input type="range" id="top_k" name="volume" min="0" max="100" step="1">
                                            </div>
                                            <div class="range-block-counter">
                                                <div contenteditable="true" data-for="top_k" id="top_k_counter">
                                                    select
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="range-block">
                                        <div class="range-block-title" data-i18n="Typical Sampling">
                                            Typical Sampling
                                        </div>
                                        <div class="range-block-range-and-counter">
                                            <div class="range-block-range">
                                                <input type="range" id="typical" name="volume" min="0" max="1" step="0.01">
                                            </div>
                                            <div class="range-block-counter">
                                                <div contenteditable="true" data-for="typical" id="typical_counter">
                                                    select
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="range-block">
                                        <div class="range-block-title" data-i18n="Tail Free Sampling">
                                            Tail Free Sampling
                                        </div>
                                        <div class="range-block-range-and-counter">
                                            <div class="range-block-range">
                                                <input type="range" id="tfs" name="volume" min="0" max="1" step="0.01">
                                            </div>
                                            <div class="range-block-counter">
                                                <div contenteditable="true" data-for="tfs" id="tfs_counter">
                                                    select
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="range-block">
                                        <div class="range-block-title" data-i18n="Rep. Pen. Slope">
                                            Rep. Pen. Slope
                                        </div>
                                        <div class="range-block-range-and-counter">
                                            <div class="range-block-range">
                                                <input type="range" id="rep_pen_slope" name="volume" min="0" max="10" step="0.1">
                                            </div>
                                            <div class="range-block-counter">
                                                <div contenteditable="true" data-for="rep_pen_slope" id="rep_pen_slope_counter">
                                                    select
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="range-block">
                                        <label class="checkbox_label" for="single_line">
                                            <input id="single_line" type="checkbox" /><span data-i18n="Single-line mode">
                                                Single-line mode</span>
                                        </label>
                                    </div>
                                    <div class="range-block flexFlowColumn">
                                        <div class="range-block-title" data-i18n="Samplers Order">
                                            Samplers Order
                                        </div>
                                        <div class="toggle-description" data-i18n="Samplers will be applied in a top-down order. Use with caution.">
                                            Samplers will be applied in a top-down order.
                                            Use with caution.
                                        </div>
                                        <div id="kobold_order">
                                            <div data-id="0" data-i18n="Top K">Top K</div>
                                            <div data-id="1" data-i18n="Top A">Top A</div>
                                            <div data-id="2" data-i18n="Top P">Top P</div>
                                            <div data-id="3" data-i18n="Tail Free Sampling">Tail Free Sampling</div>
                                            <div data-id="4" data-i18n="Typical Sampling">Typical Sampling</div>
                                            <div data-id="5" data-i18n="Temperature">Temperature</div>
                                            <div data-id="6" data-i18n="Repetition Penalty">Repetition Penalty</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div id="novel_api-settings">
                            </div>
                            <div id="textgenerationwebui_api-settings">
                                <div class="range-block">
                                    <div class="range-block-title" data-i18n="Top K">
                                        Top K
                                    </div>
                                    <div class="range-block-range-and-counter">
                                        <div class="range-block-range">
                                            <input type="range" id="top_k_textgenerationwebui" name="volume" min="0" max="200" step="1">
                                        </div>
                                        <div class="range-block-counter">
                                            <div contenteditable="true" data-for="top_k_textgenerationwebui" id="top_k_counter_textgenerationwebui">
                                                select
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="range-block">
                                    <div class="range-block-title" data-i18n="Top P">
                                        Top P
                                    </div>
                                    <div class="range-block-range-and-counter">
                                        <div class="range-block-range">
                                            <input type="range" id="top_p_textgenerationwebui" name="volume" min="0" max="1" step="0.01">
                                        </div>
                                        <div class="range-block-counter">
                                            <div contenteditable="true" data-for="top_p_textgenerationwebui" id="top_p_counter_textgenerationwebui">
                                                select
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="range-block">
                                    <div class="range-block-title" data-i18n="Typical P">
                                        Typical P
                                    </div>
                                    <div class="range-block-range-and-counter">
                                        <div class="range-block-range">
                                            <input type="range" id="typical_p_textgenerationwebui" name="volume" min="0" max="1" step="0.01">
                                        </div>
                                        <div class="range-block-counter">
                                            <div contenteditable="true" data-for="typical_p_textgenerationwebui" id="typical_p_counter_textgenerationwebui">
                                                select
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="range-block">
                                    <div class="range-block-title">
                                        Top A
                                    </div>
                                    <div class="range-block-range-and-counter">
                                        <div class="range-block-range">
                                            <input type="range" id="top_a_textgenerationwebui" name="volume" min="0" max="1" step="0.01">
                                        </div>
                                        <div class="range-block-counter">
                                            <div contenteditable="true" data-for="top_a_textgenerationwebui" id="top_a_counter_textgenerationwebui">
                                                select
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="range-block">
                                    <div class="range-block-title">
                                        Tail Free Sampling
                                    </div>
                                    <div class="range-block-range-and-counter">
                                        <div class="range-block-range">
                                            <input type="range" id="tfs_textgenerationwebui" name="volume" min="0" max="1" step="0.01">
                                        </div>
                                        <div class="range-block-counter">
                                            <div contenteditable="true" data-for="tfs_textgenerationwebui" id="tfs_counter_textgenerationwebui">
                                                select
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="range-block">
                                    <div class="range-block-title" data-i18n="Epsilon Cutoff">
                                        Epsilon Cutoff
                                    </div>
                                    <div class="range-block-range-and-counter">
                                        <div class="range-block-range">
                                            <input type="range" id="epsilon_cutoff_textgenerationwebui" name="volume" min="0" max="9" step="0.01">
                                        </div>
                                        <div class="range-block-counter">
                                            <div contenteditable="true" data-for="epsilon_cutoff_textgenerationwebui" id="epsilon_cutoff_counter_textgenerationwebui">
                                                select
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="range-block">
                                    <div class="range-block-title" data-i18n="Eta Cutoff">
                                        Eta Cutoff
                                    </div>
                                    <div class="range-block-range-and-counter">
                                        <div class="range-block-range">
                                            <input type="range" id="eta_cutoff_textgenerationwebui" name="volume" min="0" max="20" step="0.01">
                                        </div>
                                        <div class="range-block-counter">
                                            <div contenteditable="true" data-for="eta_cutoff_textgenerationwebui" id="eta_cutoff_counter_textgenerationwebui">
                                                select
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="range-block">
                                    <label class="checkbox_label" for="streaming_textgenerationwebui">
                                        <input type="checkbox" id="streaming_textgenerationwebui" />
                                        <span data-i18n="Streaming">Streaming</span>
                                    </label>
                                </div>
                                <div class="range-block">
                                    <label class="checkbox_label" for="do_sample_textgenerationwebui">
                                        <input type="checkbox" id="do_sample_textgenerationwebui" />
                                        <span data-i18n="Do Sample">Do Sample</span>
                                    </label>
                                </div>
                                <div class="range-block">
                                    <label class="checkbox_label" for="add_bos_token_textgenerationwebui">
                                        <input type="checkbox" id="add_bos_token_textgenerationwebui" />
                                        <span data-i18n="Add BOS Token">Add BOS Token</span>
                                    </label>
                                    <div class="toggle-description justifyLeft" data-i18n="Add the bos_token to the beginning of prompts. Disabling this can make the replies more creative.">
                                        Add the bos_token to the beginning of prompts. Disabling this can make the
                                        replies more creative.
                                    </div>
                                </div>
                                <div class="range-block">
                                    <label class="checkbox_label" for="ban_eos_token_textgenerationwebui">
                                        <input type="checkbox" id="ban_eos_token_textgenerationwebui" />
                                        <span data-i18n="Ban EOS Token">Ban EOS Token</span>
                                    </label>
                                    <div class="toggle-description justifyLeft" data-i18n="Ban the eos_token. This forces the model to never end the generation prematurely">
                                        Ban the eos_token. This forces the model to never end the generation
                                        prematurely.
                                    </div>
                                </div>
                                <div class="range-block">
                                    <label class="checkbox_label" for="skip_special_tokens_textgenerationwebui">
                                        <input type="checkbox" id="skip_special_tokens_textgenerationwebui" />
                                        <span data-i18n="Skip Special Tokens">Skip Special Tokens</span>
                                    </label>
                                </div>
                                <hr>
                                <h4><span data-i18n="Beam search">Beam search</span></h4>
                                <div class="range-block">
                                    <div class="range-block-title" data-i18n="Number of Beams">
                                        Number of Beams
                                    </div>
                                    <div class="range-block-range-and-counter">
                                        <div class="range-block-range">
                                            <input type="range" id="num_beams_textgenerationwebui" name="volume" min="1" max="20" step="1" />
                                        </div>
                                        <div class="range-block-counter">
                                            <div contenteditable="true" data-for="num_beams_textgenerationwebui" id="num_beams_counter_textgenerationwebui">
                                                select
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="range-block">
                                    <div class="range-block-title">
                                        <span data-i18n="Length Penalty">Length Penalty</span>
                                    </div>
                                    <div class="range-block-range-and-counter">
                                        <div class="range-block-range">
                                            <input type="range" id="length_penalty_textgenerationwebui" name="volume" min="-5" max="5" step="0.1" />
                                        </div>
                                        <div class="range-block-counter">
                                            <div contenteditable="true" data-for="length_penalty_textgenerationwebui" id="length_penalty_counter_textgenerationwebui">
                                                select
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="range-block">
                                    <label class="checkbox_label" for="early_stopping_textgenerationwebui">
                                        <input type="checkbox" id="early_stopping_textgenerationwebui" />
                                        <span data-i18n="Early Stopping">Early Stopping</span>
                                    </label>
                                </div>
                                <hr>
                                <h4 data-i18n="Contrastive search">Contrastive search</h4>
                                <div class="range-block">
                                    <div class="range-block-title" data-i18n="Penalty Alpha">
                                        Penalty Alpha
                                    </div>
                                    <div class="range-block-range-and-counter">
                                        <div class="range-block-range">
                                            <input type="range" id="penalty_alpha_textgenerationwebui" name="volume" min="0" max="5" step="0.05" />
                                        </div>
                                        <div class="range-block-counter">
                                            <div contenteditable="true" data-for="penalty_alpha_textgenerationwebui" id="penalty_alpha_counter_textgenerationwebui">
                                                select
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <hr>
                                <h4 data-i18n="Mirostat (mode=1 is only for llama.cpp)">Mirostat (mode=1 is only for llama.cpp)</h4>
                                <div class="range-block">
                                    <div class="range-block-title" data-i18n="Mirostat Mode">
                                        Mirostat Mode
                                    </div>
                                    <div class="range-block-range-and-counter">
                                        <div class="range-block-range">
                                            <input type="range" id="mirostat_mode_textgenerationwebui" name="volume" min="0" max="2" step="1" />
                                        </div>
                                        <div class="range-block-counter">
                                            <div contenteditable="true" data-for="mirostat_mode_textgenerationwebui" id="mirostat_mode_counter_textgenerationwebui">
                                                select
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="range-block">
                                    <div class="range-block-title" data-i18n="Mirostat Tau">
                                        Mirostat Tau
                                    </div>
                                    <div class="range-block-range-and-counter">
                                        <div class="range-block-range">
                                            <input type="range" id="mirostat_tau_textgenerationwebui" name="volume" min="0" max="10" step="0.01" />
                                        </div>
                                        <div class="range-block-counter">
                                            <div contenteditable="true" data-for="mirostat_tau_textgenerationwebui" id="mirostat_tau_counter_textgenerationwebui">
                                                select
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="range-block">
                                    <div class="range-block-title" data-i18n="Mirostat Eta">
                                        Mirostat Eta
                                    </div>
                                    <div class="range-block-range-and-counter">
                                        <div class="range-block-range">
                                            <input type="range" id="mirostat_eta_textgenerationwebui" name="volume" min="0" max="1" step="0.01" />
                                        </div>
                                        <div class="range-block-counter">
                                            <div contenteditable="true" data-for="mirostat_eta_textgenerationwebui" id="mirostat_eta_counter_textgenerationwebui">
                                                select
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <hr>
                                <div class="range-block">
                                    <div class="range-block-title" data-i18n="Seed">
                                        Seed
                                    </div>
                                    <input type="number" id="seed_textgenerationwebui" class="text_pole wide100p" maxlength="100" />
                                </div>
                            </div>
                            <div id="openai_settings">
                                <div class="">
                                    <div class="range-block">
                                        <label title="Inserts jailbreak as a last system message" class="checkbox_label widthFreeExpand" data-i18n="[title]Inserts jailbreak as a last system message">
                                            <input id="jailbreak_system" type="checkbox" />
                                            <span data-i18n="Send Jailbreak">
                                                Send Jailbreak
                                            </span>
                                        </label>
                                        <div class="toggle-description justifyLeft">
                                            <span data-i18n="Inserts jailbreak as a last system message.">Inserts
                                                jailbreak as a last system message.</span><br>
                                            <span data-i18n="This tells the AI to ignore its usual content restrictions.">This
                                                tells the AI to ignore its usual content restrictions.</span>
                                        </div>
                                    </div>
                                    <div class="range-block">
                                        <label class="checkbox_label  widthFreeExpand" for="nsfw_toggle">
                                            <input id="nsfw_toggle" type="checkbox" checked>
                                            <span data-i18n="NSFW Encouraged">
                                                NSFW Encouraged</span>
                                        </label>
                                        <div class="toggle-description justifyLeft" data-i18n="Tell the AI that NSFW is allowed.">
                                            Tell the AI that NSFW is allowed.
                                        </div>
                                    </div>
                                    <div class="range-block">
                                        <label title="NSFW block goes first in the resulting prompt" class="checkbox_label widthFreeExpand" data-i18n="[title]NSFW block goes first in the resulting prompt">
                                            <input id="nsfw_first" type="checkbox" /><span data-i18n="NSFW Prioritized">
                                                NSFW Prioritized</span>
                                        </label>
                                        <div class="toggle-description justifyLeft" data-i18n="NSFW prompt text goes first in the prompt to emphasize its effect.">
                                            NSFW prompt text goes first in the prompt to emphasize its effect.
                                        </div>
                                    </div>

                                    <div class="range-block">
                                        <label for="stream_toggle" title="Enables OpenAI completion streaming" class="checkbox_label widthFreeExpand" data-i18n="[title]Enables OpenAI completion streaming">
                                            <input id="stream_toggle" type="checkbox" /><span data-i18n="Streaming">
                                                Streaming</span>
                                        </label>
                                        <div class="toggle-description justifyLeft">
                                            <span data-i18n="Display the response bit by bit as it is generated.">Display
                                                the response bit by bit as it is generated.</span><br>
                                            <span data-i18n="When this is off, responses will be displayed all at once when they are complete.">When
                                                this is off, responses will be displayed all at once when they are
                                                complete.</span>
                                        </div>
                                    </div>
                                    <div class="range-block">
                                        <label title="Use OAI knowledge base to enhance definitions for public figures and known fictional characters" data-i18n="[title]Use OAI knowledge base to enhance definitions for public figures and known fictional characters" class="checkbox_label widthFreeExpand">
                                            <input id="enhance_definitions" type="checkbox" /><span data-i18n="Enhance Definitions">
                                                Enhance Definitions</span>
                                        </label>
                                        <div class="toggle-description justifyLeft" data-i18n="Use OAI knowledge base to enhance definitions for public figures and known fictional characters">
                                            Use OAI knowledge base to enhance definitions for public figures and known
                                            fictional characters
                                        </div>
                                    </div>
                                    <div class="range-block">
                                        <label for="wrap_in_quotes" title="Wrap user messages in quotes before sending" data-i18n="[title]Wrap user messages in quotes before sending" class="checkbox_label widthFreeExpand">
                                            <input id="wrap_in_quotes" type="checkbox" /><span data-i18n="Wrap in Quotes">
                                                Wrap in Quotes</span>
                                        </label>
                                        <div class="toggle-description justifyLeft">
                                            <span data-i18n="Wrap entire user message in quotes before sending.">Wrap
                                                entire user message in quotes before sending.</span><br>
                                            <span data-i18n="Leave off if you use quotes manually for speech.">Leave off
                                                if you use quotes manually for speech.</span>
                                        </div>
                                    </div>
                                    <div class="range-block">
                                        <div class="range-block-title justifyLeft">
                                            <span data-i18n="Replace empty message">
                                                Replace empty message
                                            </span>
                                        </div>
                                        <div class="toggle-description justifyLeft">
                                            <span data-i18n="Send this text instead of nothing when the text box is empty.">
                                                Send this text instead of nothing when the text box is empty.
                                            </span>
                                        </div>
                                        <div class="wide100p">
                                            <textarea id="send_if_empty_textarea" class="text_pole textarea_compact" name="send_if_empty" rows="1" placeholder=""></textarea>
                                        </div>
                                    </div>
                                </div>
                                <br>
                                <div class="range-block">
                                    <div class="range-block-title openai_restorable">
                                        <span data-i18n="Main prompt">Main prompt</span>
                                        <div id="main_prompt_restore" title="Restore default prompt" data-i18n="[title]Restore default prompt" class="right_menu_button">
                                            <div class="fa-solid fa-clock-rotate-left "></div>
                                        </div>
                                    </div>
                                    <div class="prompt_overridden">
                                        Overridden by the Character Definitions.
                                    </div>
                                    <div class="toggle-description justifyLeft" data-i18n="The main prompt used to set the model behavior">
                                        The main prompt used to set the model behavior
                                    </div>
                                    <div class="wide100p">
                                        <textarea id="main_prompt_textarea" class="text_pole textarea_compact" name="main_prompt" rows="6" placeholder=""></textarea>
                                    </div>
                                </div>
                                <div class="range-block">
                                    <div class="range-block-title openai_restorable">
                                        <span data-i18n="NSFW prompt">NSFW prompt</span>
                                        <div id="nsfw_prompt_restore" title="Restore default prompt" data-i18n="[title]Restore default prompt" class="right_menu_button">
                                            <div class="fa-solid fa-clock-rotate-left "></div>
                                        </div>
                                    </div>
                                    <div class="toggle-description justifyLeft" data-i18n="Prompt that is used when the NSFW toggle is on">
                                        Prompt that is used when the NSFW toggle is on
                                    </div>
                                    <div class="wide100p">
                                        <textarea id="nsfw_prompt_textarea" class="text_pole textarea_compact" name="nsfw_prompt" rows="6" placeholder=""></textarea>
                                    </div>
                                </div>
                                <div class="range-block">
                                    <div class="range-block-title openai_restorable">
                                        <span data-i18n="NSFW avoidance prompt">NSFW avoidance prompt</span>
                                        <div id="nsfw_avoidance_prompt_restore" title="Restore default prompt" data-i18n="[title]Restore default prompt" class="right_menu_button">
                                            <div class="fa-solid fa-clock-rotate-left"></div>
                                        </div>
                                    </div>
                                    <div class="toggle-description justifyLeft">
                                        <span data-i18n="Prompt that is used when the NSFW toggle is off">
                                            Prompt that is used when the NSFW toggle is OFF
                                        </span>
                                    </div>
                                    <div class="wide100p">
                                        <textarea id="nsfw_avoidance_prompt_textarea" class="text_pole textarea_compact" name="nsfw_prompt" rows="2" placeholder=""></textarea>
                                    </div>
                                </div>
                                <div class="range-block">
                                    <div class="range-block-title openai_restorable">
                                        <span data-i18n="Jailbreak prompt">Jailbreak prompt</span>
                                        <div id="jailbreak_prompt_restore" title="Restore default prompt" data-i18n="[title]Restore default prompt" class="right_menu_button">
                                            <div class="fa-solid fa-clock-rotate-left"></div>
                                        </div>
                                    </div>
                                    <div class="jailbreak_overridden">
                                        Overridden by the Character Definitions.
                                    </div>
                                    <div class="toggle-description justifyLeft" data-i18n="Prompt that is used when the Jailbreak toggle is on">
                                        Prompt that is used when the Jailbreak toggle is on
                                    </div>
                                    <div class="wide100p">
                                        <textarea id="jailbreak_prompt_textarea" class="text_pole textarea_compact" name="jailbreak_prompt" rows="6" placeholder=""></textarea>
                                    </div>
                                </div>

                                <div class="inline-drawer wide100p">
                                    <div class="inline-drawer-toggle inline-drawer-header margin-bot-10px">
                                        <span data-i18n="Advanced prompt bits"><b>Advanced prompt bits</b></span>
                                        <div class="fa-solid fa-circle-chevron-down inline-drawer-icon down"></div>
                                    </div>
                                    <div class="inline-drawer-content">
                                        <div class="range-block">
                                            <div class="range-block-title openai_restorable">
                                                <span data-i18n="Impersonation prompt">Impersonation prompt</span>
                                                <div id="impersonation_prompt_restore" title="Restore default prompt" data-i18n="[title]Restore default prompt" class="right_menu_button">
                                                    <div class="fa-solid fa-clock-rotate-left"></div>
                                                </div>
                                            </div>
                                            <div class="toggle-description justifyLeft" data-i18n="Prompt that is used for Impersonation function">
                                                Prompt that is used for Impersonation function
                                            </div>
                                            <div class="wide100p">
                                                <textarea id="impersonation_prompt_textarea" class="text_pole textarea_compact" name="impersonation_prompt" rows="6" placeholder=""></textarea>
                                            </div>
                                        </div>
                                        <div class="range-block">
                                            <div class="range-block-title openai_restorable">
                                                <span data-i18n="World Info format template">World Info format template</span>
                                                <div id="wi_format_restore" title="Restore default format" data-i18n="[title]Restore default prompt" class="right_menu_button">
                                                    <div class="fa-solid fa-clock-rotate-left"></div>
                                                </div>
                                            </div>
                                            <div class="toggle-description justifyLeft">
                                                <span data-i18n="Wraps activated World Info entries before inserting into the prompt. Use {0} to mark a place where the content is inserted.">
                                                    Wraps activated World Info entries before inserting into the prompt. Use <tt>{0}</tt> to mark a place where the content is inserted.
                                                </span>
                                            </div>
                                            <div class="wide100p">
                                                <textarea id="wi_format_textarea" class="text_pole textarea_compact" rows="3" placeholder=""></textarea>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="range-block" data-source="openai,openrouter">
                                    <div class="range-block-title openai_restorable" data-i18n="Logit Bias">
                                        Logit Bias
                                    </div>
                                    <div class="toggle-description justifyLeft" data-i18n="Helps to ban or reenforce the usage of certain words">
                                        Helps to ban or reinforce the usage of certain tokens. Confirm token parsing with <a target="_blank" href="https://tiktokenizer.vercel.app/">Tiktokenizer</a>.
                                    </div>
                                    <div class="openai_logit_bias_preset_form">
                                        <select id="openai_logit_bias_preset">
                                        </select>
                                        <i title="New preset" id="openai_logit_bias_new_preset" class="menu_button fa-solid fa-plus" data-i18n="[title]New preset"></i>
                                        <i title="Import preset" id="openai_logit_bias_import_preset" class="menu_button fa-solid fa-upload" data-i18n="[title]Import preset"></i>
                                        <i title="Export preset" id="openai_logit_bias_export_preset" class="menu_button fa-solid fa-download" data-i18n="[title]Export preset"></i>
                                        <i title="Delete preset" id="openai_logit_bias_delete_preset" class="menu_button fa-solid fa-trash-can" data-i18n="[title]Delete preset"></i>
                                        <input id="openai_logit_bias_import_file" type="file" accept=".json" hidden />
                                    </div>

                                    <div class="inline-drawer wide100p">
                                        <div class="inline-drawer-toggle inline-drawer-header">
                                            <b data-i18n="View / Edit bias preset">View / Edit bias preset</b>
                                            <div class="fa-solid fa-circle-chevron-down inline-drawer-icon down"></div>
                                        </div>
                                        <div class="inline-drawer-content">
                                            <div id="openai_logit_bias_new_entry" class="menu_button wide100p flex-container justifyCenter" data-i18n="Add bias entry">
                                                Add bias entry
                                            </div>
                                            <div class="openai_logit_bias_list"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div id="sys-settings-button" class="drawer">
            <div class="drawer-toggle drawer-header">
                <div id="API-status-top" class="drawer-icon fa-solid fa-plug-circle-exclamation  closedIcon" title="API Connections" data-i18n="[title]API Connections"></div>
            </div>
            <div id="rm_api_block" class="drawer-content closedDrawer">
                <h3 id="title_api">API</h3>
                <div class="flex-container flexFlowColumn">
                    <div id="main-API-selector-block">
                        <select id="main_api">
                            <option value="kobold"><span data-i18n="KoboldAI">KoboldAI</span></option>
                            <option value="koboldhorde"><span data-i18n="KoboldAI Horde">KoboldAI Horde</span></option>
                            <option value="textgenerationwebui"><span data-i18n="Text Gen WebUI (ooba)">Text Gen WebUI (ooba)</span></option>
                            <option value="novel"><span data-i18n="NovelAI">NovelAI</span></option>
                            <option value="openai"><span data-i18n="Chat Completion (OpenAI, Claude, Window/OpenRouter, Scale)">Chat Completion (OpenAI, Claude, Window, OpenRouter, Scale)</span></option>
                        </select>
                    </div>
                    <div id="kobold_horde" style="position: relative;"> <!-- shows the kobold settings -->
                        <form action="javascript:void(null);" method="post" enctype="multipart/form-data">
                            <div id="kobold_horde_block">
                                <ul>
                                    <li data-i18n="Avoid sending sensitive information to the Horde.">
                                        Avoid sending sensitive information to the Horde.
                                        <a target="_blank" href="https://docs.sillytavern.app/usage/api-connections/horde/" data-i18n="Review the Privacy statement">Review the Privacy statement</a>
                                    </li>
                                    <li>
                                        <a target="_blank" href="https://horde.koboldai.net/register" data-i18n="Register a Horde account for faster queue times">Register a Horde
                                            account for faster queue times</a>
                                    </li>
                                    <li>
                                        <a target="_blank" href="https://github.com/db0/AI-Horde-Worker#readme" data-i18n="Learn how to contribute your idel GPU cycles to the Horde">Learn
                                            how to contribute your idle GPU cycles to the Horde</a>
                                    </li>
                                </ul>

                                <label for="horde_auto_adjust_context_length" class="checkbox_label">
                                    <input id="horde_auto_adjust_context_length" type="checkbox" />
                                    <span data-i18n="Adjust context size to worker capabilities">Adjust context size to worker capabilities</span>
                                </label>

                                <label for="horde_auto_adjust_response_length" class="checkbox_label">
                                    <input id="horde_auto_adjust_response_length" type="checkbox" />
                                    <span data-i18n="Adjust response length to worker capabilities">Adjust response length to worker capabilities</span>
                                </label>

                                <label for="horde_trusted_workers_only" class="checkbox_label" title="Can help with bad responses by queueing only the approved workers. May slowdown the response time." data-i18n="[title]Can help with bad responses by queueing only the approved workers. May slowdown the response time.">
                                    <input id="horde_trusted_workers_only" type="checkbox" />
                                    <span data-i18n="Trusted workers only">Trusted workers only</span>
                                </label>

                                <h4 data-i18n="API key">API key</h4>
                                <small>Get it here: <a target="_blank" href="https://horde.koboldai.net/register">Register</a> (<a id="horde_kudos" href="javascript:void(0);">View my Kudos</a>)<br>
                                    Enter <span class="monospace">0000000000</span> to use anonymous mode.
                                </small>
                                <!-- <div>
                                    <a id="horde_kudos" href="javascript:void(0);">View my Kudos</a>
                                </div> -->
                                <div class="flex-container">
                                    <input id="horde_api_key" name="horde_api_key" class="text_pole flex1" maxlength="500" type="text" placeholder="0000000000" autocomplete="off">
                                    <div title="Clear your API key" data-i18n="[title]Clear your API key" class="menu_button fa-solid fa-circle-xmark clear-api-key" data-key="api_key_horde"></div>
                                </div>
                                <div data-for="horde_api_key" class="neutral_warning" data-i18n="For privacy reasons, your API key will be hidden after you reload the page.">
                                    For privacy reasons, your API key will be hidden after you reload the page.
                                </div>
                                <h4 class="horde_model_title">
                                    Models
                                    <div id="horde_refresh" title="Refresh models" data-i18n="[title]Refresh models" class="right_menu_button">
                                        <div class="fa-solid fa-repeat "></div>
                                    </div>
                                </h4>
                                <select id="horde_model" multiple>
                                    <option data-i18n="-- Horde models not loaded --">-- Horde models not loaded --</option>
                                </select>
                            </div>
                            <div id="online_status_horde">
                                <div id="online_status_indicator_horde"></div>
                                <div id="online_status_text_horde" data-i18n="Not connected">Not connected</div>
                            </div>
                        </form>
                    </div>
                    <div id="kobold_api" style="position: relative;"> <!-- shows the kobold settings -->
                        <form action="javascript:void(null);" method="post" enctype="multipart/form-data">
                            <div id="kobold_api_block">
                                <h4 data-i18n="API url">API url</h4>
                                <small data-i18n="Example: http://127.0.0.1:5000/api ">Example: http://127.0.0.1:5000/api </small>
                                <input id="api_url_text" name="api_url" class="text_pole" placeholder="http://127.0.0.1:5000/api" maxlength="500" value="" autocomplete="off">
                                <input id="api_button" class="menu_button" type="submit" value="Connect">
                                <div id="api_loading" class="api-load-icon fa-solid fa-hourglass fa-spin"></div>
                            </div>
                            <div id="online_status2">
                                <div id="online_status_indicator2"></div>
                                <div id="online_status_text2" data-i18n="Not connected">Not connected</div>
                            </div>
                        </form>
                    </div>
                    <div id="novel_api" style="display: none;position: relative;"> <!-- shows the novel settings -->
                        <form action="javascript:void(null);" method="post" enctype="multipart/form-data">

                            <h4 data-i18n="Novel API key">Novel API key</h4>
                            <span>
                                <ol>
                                    <li>
                                        <a href="https://docs.sillytavern.app/usage/api-connections/novelai/" class="notes-link" target="_blank"> <span data-i18n="Get your NovelAI API Key">Get your NovelAI API key</span></a>
                                    </li>
                                    <li><span data-i18n="Enter it in the box below">Enter it in the box below:</span>
                                    </li>
                                </ol>
                            </span>
                            <div class="flex-container">
                                <input id="api_key_novel" name="api_key_novel" class="text_pole flex1 wide100p" maxlength="500" size="35" type="text" autocomplete="off">
                                <div title="Clear your API key" data-i18n="[title]Clear your API key" class="menu_button fa-solid fa-circle-xmark clear-api-key" data-key="api_key_novel">
                                </div>
                            </div>
                            <div data-for="api_key_novel" class="neutral_warning" data-i18n="For privacy reasons, your API key will be hidden after you reload the page.">
                                For privacy reasons, your API key will be hidden after you reload the page.
                            </div>
                            <input id="api_button_novel" class="menu_button" type="submit" value="Connect">
                            <div id="api_loading_novel" class="api-load-icon fa-solid fa-hourglass fa-spin"></div>
                            <h4><span data-i18n="Novel AI Model">Novel AI Model</span>
                                <a href="https://docs.sillytavern.app/usage/api-connections/novelai/#models" class="notes-link" target="_blank">
                                    <span class="note-link-span">?</span>
                                </a>
                            </h4>
                            <select id="model_novel_select">
                                <option value="euterpe-v2">Euterpe</option>
                                <option value="krake-v2">Krake</option>
                                <option value="clio-v1">Clio</option>
                            </select>
                        </form>
                        <div id="online_status3">
                            <div id="online_status_indicator3"></div>
                            <div id="online_status_text3" data-i18n="No connection...">No connection...</div>
                        </div>
                    </div>
                    <div id="textgenerationwebui_api" style="display: none;position: relative;">
                        <div class="flex-container">
                            <a href="https://github.com/oobabooga/text-generation-webui" target="_blank">
                                oobabooga/text-generation-webui
                            </a>
                            <span data-i18n="Make sure you run it with">
                                Make sure you run it with <tt>--api</tt> flag
                            </span>
                        </div>
                        <div>
                            <div class="flex-container flexFlowColumn">
                                <div class="flex1">
                                    <h4 data-i18n="Blocking API url">Blocking API url</h4>
                                    <small>Example: http://127.0.0.1:5000/</small>
                                    <input id="textgenerationwebui_api_url_text" name="textgenerationwebui_api_url" class="text_pole wide100p" maxlength="500" value="" autocomplete="off">
                                </div>
                                <div class="flex1">
                                    <h4 data-i18n="Streaming API url">Streaming API url</h4>
                                    <small>Example: ws://127.0.0.1:5005/api/v1/stream</small>
                                    <input id="streaming_url_textgenerationwebui" type="text" class="text_pole wide100p" maxlength="500" value="" autocomplete="off">
                                </div>
                            </div>
                            <input id="api_button_textgenerationwebui" class="menu_button" type="submit" value="Connect">
                            <div id="api_loading_textgenerationwebui" class="api-load-icon fa-solid fa-hourglass fa-spin"></div>
                        </div>
                        <div class="online_status4">
                            <div class="online_status_indicator4"></div>
                            <div class="online_status_text4" data-i18n="Not connected">Not connected</div>
                        </div>
                    </div>
                    <div id="openai_api" style="display: none;position: relative;">
                        <h3 data-i18n="Chat Completion Source">
                            Chat Completion Source
                        </h3>
                        <select id="chat_completion_source">
                            <option value="openai">OpenAI</option>
                            <option value="windowai">Window AI</option>
                            <option value="openrouter">OpenRouter</option>
                            <option value="claude">Claude</option>
                            <option value="scale">Scale</option>
                        </select>
                        <form id="openai_form" data-source="openai" action="javascript:void(null);" method="post" enctype="multipart/form-data">
                            <h4><span data-i18n="OpenAI API key">OpenAI API key</span></h4>
                            <span>
                                <ol>
                                    <li>
                                        <span data-i18n="Follow">Follow</span>
                                        <a href="https://docs.sillytavern.app/usage/api-connections/openai/" class="notes-link" target="_blank"><span data-i18n="these directions"> these directions </span></a>
                                        <span data-i18n="to get your OpenAI API key.">to get your OpenAI API key.</span>
                                    </li>
                                    <li>
                                        <span data-i18n="Enter it in the box below">Enter it in the box below:</span>
                                    </li>
                                </ol>
                            </span>
                            <div class="flex-container">
                                <input id="api_key_openai" name="api_key_openai" class="text_pole flex1" maxlength="500" value="" type="text" autocomplete="off">
                                <div title="Clear your API key" data-i18n="[title]Clear your API key" class="menu_button fa-solid fa-circle-xmark clear-api-key" data-key="api_key_openai"></div>
                            </div>
                            <div data-for="api_key_openai" class="neutral_warning">
                                For privacy reasons, your API key will be hidden after you reload the page.
                            </div>
                            <div>
                                <h4 data-i18n="OpenAI Model">OpenAI Model</h4>
                                <select id="model_openai_select">
                                    <optgroup label="GPT-3.5 Turbo">
                                        <option value="gpt-3.5-turbo">gpt-3.5-turbo</option>
                                        <option value="gpt-3.5-turbo-16k">gpt-3.5-turbo-16k</option>
                                        <option value="gpt-3.5-turbo-16k-0613">gpt-3.5-turbo-16k-0613</option>
                                        <option value="gpt-3.5-turbo-0613">gpt-3.5-turbo-0613</option>
                                        <option value="gpt-3.5-turbo-0301">gpt-3.5-turbo-0301</option>
                                    </optgroup>
                                    <optgroup label="GPT-4">
                                        <option value="gpt-4">gpt-4</option>
                                        <option value="gpt-4-0613">gpt-4-0613</option>
                                        <option value="gpt-4-0314">gpt-4-0314</option>
                                        <option value="gpt-4-32k">gpt-4-32k</option>
                                        <option value="gpt-4-32k-0301">gpt-4-32k-0301</option>
                                        <option value="gpt-4-32k-0613">gpt-4-32k-0613</option>
                                    </optgroup>
                                    <optgroup label="Other">
                                        <option value="text-davinci-003">text-davinci-003</option>
                                        <option value="text-davinci-002">text-davinci-002</option>
                                        <option value="text-curie-001">text-curie-001</option>
                                        <option value="text-babbage-001">text-babbage-001</option>
                                        <option value="text-ada-001">text-ada-001</option>
                                        <option value="code-davinci-002">code-davinci-002</option>
                                    </optgroup>
                                </select>
                            </div>
                            <div>
                                <a id="openai_api_usage" href="javascript:void(0);"><span data-i18n="View API Usage Metrics">View API Usage Metrics</span></a>
                            </div>
                        </form>
                        <form id="claude_form" data-source="claude" action="javascript:void(null);" method="post" enctype="multipart/form-data">
                            <h4>Claude API Key</h4>
                            <div>
                                Get your key from <a target="_blank" href="https://console.anthropic.com/account/keys">Anthropic's developer console</a>.
                            </div>
                            <div>
                                <b>
                                    Slack and Poe cookies will not work here, do not bother trying.
                                </b>
                            </div>
                            <div class="flex-container">
                                <input id="api_key_claude" name="api_key_claude" class="text_pole flex1" maxlength="500" value="" type="text" autocomplete="off">
                                <div title="Clear your API key" data-i18n="[title]Clear your API key" class="menu_button fa-solid fa-circle-xmark clear-api-key" data-key="api_key_claude"></div>
                            </div>
                            <div data-for="api_key_claude" class="neutral_warning">
                                For privacy reasons, your API key will be hidden after you reload the page.
                            </div>
                            <div>
                                <h4 data-i18n="Claude Model">Claude Model</h4>
                                <select id="model_claude_select">
                                    <optgroup label="Latest">
                                        <option value="claude-2">claude-2</option>
                                        <option value="claude-v1">claude-v1</option>
                                        <option value="claude-v1-100k">claude-v1-100k</option>
                                        <option value="claude-instant-v1">claude-instant-v1</option>
                                        <option value="claude-instant-v1-100k">claude-instant-v1-100k</option>
                                    </optgroup>
                                    <optgroup label="Sub-versions">
                                        <option value="claude-2.0">claude-2.0</option>
                                        <option value="claude-v1.3">claude-v1.3</option>
                                        <option value="claude-v1.3-100k">claude-v1.3-100k</option>
                                        <option value="claude-v1.2">claude-v1.2</option>
                                        <option value="claude-v1.0">claude-v1.0</option>
                                        <option value="claude-instant-v1.1">claude-instant-v1.1</option>
                                        <option value="claude-instant-v1.1-100k">claude-instant-v1.1-100k</option>
                                        <option value="claude-instant-v1.0">claude-instant-v1.0</option>
                                    </optgroup>
                                </select>
                            </div>
                        </form>

                        <form id="windowai_form" data-source="windowai" action="javascript:void(null);" method="post" enctype="multipart/form-data">
                            <div>
                                <h4 data-i18n="Window AI Model">Window AI Model</h4>
                                <select id="model_windowai_select">
                                    <option value="">Use extension settings</option>
                                    <option value="openai/gpt-3.5-turbo">openai/gpt-3.5-turbo</option>
                                    <option value="openai/gpt-3.5-turbo-16k">openai/gpt-3.5-turbo-16k</option>
                                    <option value="openai/gpt-4">openai/gpt-4</option>
                                    <option value="openai/gpt-4-32k">openai/gpt-4-32k</option>
                                    <option value="anthropic/claude-instant-v1">anthropic/claude-instant-v1</option>
                                    <option value="anthropic/claude-instant-v1-100k">anthropic/claude-instant-v1-100k</option>
                                    <option value="anthropic/claude-v1">anthropic/claude-v1</option>
                                    <option value="anthropic/claude-v1-100k">anthropic/claude-v1-100k</option>
                                    <option value="google/palm-2-chat-bison">google/palm-2-chat-bison</option>
                                    <option value="google/palm-2-codechat-bison">google/palm-2-codechat-bison</option>
                                    <option value="togethercomputer/GPT-NeoXT-Chat-Base-20B">togethercomputer/GPT-NeoXT-Chat-Base-20B</option>
                                    <option value="cohere/command-nightly">cohere/command-nightly</option>
                                </select>
                            </div>
                        </form>

                        <form id="openrouter_form" data-source="openrouter" action="javascript:void(null);" method="post" enctype="multipart/form-data">
                            <div>
                                <h4 data-i18n="OpenRouter Model">OpenRouter Model</h4>
                                <select id="model_openrouter_select">
                                    <option data-i18n="Connect to the API">-- Connect to the API --</option>
                                </select>
                            </div>
                            <h4 data-i18n="OpenRouter API Key">OpenRouter API Key</h4>
                            <div>
                                <small>
                                    Click "Authorize" below or get the key from <a target="_blank" href="https://openrouter.ai/keys/">OpenRouter</a>.
                                </small>
                            </div>
                            <div class="flex-container">
                                <input id="api_key_openrouter" name="api_key_openrouter" class="text_pole flex1" maxlength="500" value="" type="text" autocomplete="off">
                                <div title="Clear your API key" data-i18n="[title]Clear your API key" class="menu_button fa-solid fa-circle-xmark clear-api-key" data-key="api_key_openrouter"></div>
                            </div>
                            <div data-for="api_key_openrouter" class="neutral_warning">
                                For privacy reasons, your API key will be hidden after you reload the page.
                            </div>
                        </form>

                        <form id="scale_form" data-source="scale" action="javascript:void(null);" method="post" enctype="multipart/form-data">
                            <h4>Scale API Key</h4>
                            <div class="flex-container">
                                <input id="api_key_scale" name="api_key_scale" class="text_pole flex1" maxlength="500" value="" autocomplete="off">
                                <div title="Clear your API key" data-i18n="[title]Clear your API key" class="menu_button fa-solid fa-circle-xmark clear-api-key" data-key="api_key_scale"></div>
                            </div>
                            <div data-for="api_key_scale" class="neutral_warning">
                                For privacy reasons, your API key will be hidden after you reload the page.
                            </div>
                            <h4>Scale API URL</h4>
                            <input id="api_url_scale" name="api_url_scale" class="text_pole" maxlength="500" value="" autocomplete="off" placeholder="https://dashboard.scale.com/spellbook/api/v2/deploy/xxxxxxx">
                            <!-- Its only purpose is to trigger max context size check -->
                            <select id="model_scale_select" class="displayNone"></select>
                        </form>

                        <div class="flex-container flex">
                            <input id="api_button_openai" class="menu_button" type="submit" value="Connect">
                            <input data-source="openrouter" id="openrouter_authorize" class="menu_button" type="button" value="Authorize" title="Get your OpenRouter API token using OAuth flow. You will be redirected to openrouter.ai" data-i18n="[title]Get your OpenRouter API token using OAuth flow. You will be redirected to openrouter.ai">
                            <input id="test_api_button" class="menu_button" type="button" value="Test Message" title="Verifies your API connection by sending a short test message. Be aware that you'll be credited for it!" data-i18n="[title]Verifies your API connection by sending a short test message. Be aware that you'll be credited for it!">
                        </div>
                        <div id="api_loading_openai" class=" api-load-icon fa-solid fa-hourglass fa-spin"></div>
                        <div class="online_status4">
                            <div class="online_status_indicator4"></div>
                            <div class="online_status_text4">No connection...</div>
                        </div>
                        <br>
                    </div>
                </div>
                <div class="flex-container alignitemscenter spaceBetween wide100p">
                    <label for="auto-connect-checkbox" class="checkbox_label"><input id="auto-connect-checkbox" type="checkbox" />
                        <span data-i18n="Auto-connect to Last Server">Auto-connect to Last Server</span>
                    </label>
                    <a id="viewSecrets" href="javascript:void(0);"><span data-i18n="View hidden API keys">View hidden API keys</span></a>
                </div>
            </div>
        </div>

        <div id="advanced-formatting-button" class="drawer">
            <div class="drawer-toggle">
                <div class="drawer-icon fa-solid fa-font  closedIcon" title="AI Response Formatting" data-i18n="[title]AI Response Formatting"></div>
            </div>
            <div class="drawer-content">
                <h3 data-i18n="Advanced Formatting">Advanced Formatting
                    <a href="https://docs.sillytavern.app/usage/core-concepts/advancedformatting/" class="notes-link" target="_blank">
                        <span class="note-link-span">?</span>
                    </a>
                </h3>
                <div class="flex-container">
                    <div name="PygOverrides" class="flex1">
                        <h4><span data-i18n="AutoFormat Overrides">AutoFormat Overrides</span></h4>
                        <label class="checkbox_label" for="disable-description-formatting-checkbox">
                            <input id="disable-description-formatting-checkbox" type="checkbox" />
                            <span data-i18n="Disable description formatting">Disable description formatting</span>
                        </label>
                        <label class="checkbox_label" for="disable-scenario-formatting-checkbox">
                            <input id="disable-scenario-formatting-checkbox" type="checkbox" />
                            <span data-i18n="Disable scenario formatting"> Disable scenario formatting</span>
                        </label>
                        <label class="checkbox_label" for="disable-personality-formatting-checkbox">
                            <input id="disable-personality-formatting-checkbox" type="checkbox" />
                            <span data-i18n="Disable personality formatting"> Disable personality formatting</span>
                        </label>
                        <label class="checkbox_label" for="disable-examples-formatting-checkbox">
                            <input id="disable-examples-formatting-checkbox" type="checkbox" />
                            <span data-i18n="Disable example chats formatting">Disable example chats formatting</span>
                        </label>
                        <label class="checkbox_label" for="disable-start-formatting-checkbox">
                            <input id="disable-start-formatting-checkbox" type="checkbox" />
                            <span data-i18n="Disable chat start formatting">Disable chat start formatting</span>
                        </label>
                        <label class="checkbox_label" for="trim_spaces">
                            <input id="trim_spaces" type="checkbox" />
                            <span data-i18n="Trim spaces">Trim spaces</span>
                        </label>
                        <label class="checkbox_label" for="trim_sentences_checkbox">
                            <input id="trim_sentences_checkbox" type="checkbox" />
                            <span data-i18n="Trim Incomplete Sentences">Trim Incomplete Sentences</span>
                        </label>
                        <!-- Add margin since this is a child of above -->
                        <label style="margin-left: 1em;" class="checkbox_label" for="include_newline_checkbox">
                            <input id="include_newline_checkbox" type="checkbox" />
                            <span data-i18n="Include Newline">Include Newline</span>
                        </label>
                        <div>
                            <h4 data-i18n="Custom Chat Separator">
                                Custom Chat Separator
                            </h4>
                            <div>
                                <input id="custom_chat_separator" class="text_pole textarea_compact" type="text" placeholder="&lt;START&gt;" maxlength="100" />
                            </div>
                        </div>
                        <div>
                            <h4 data-i18n="Non-markdown strings">
                                Non-markdown strings
                            </h4>
                            <div>
                                <input id="markdown_escape_strings" class="text_pole textarea_compact" type="text" data-i18n="[placeholder]separate with commas w/o space between" placeholder="separate with commas w/o space between" maxlength="100" />
                            </div>
                        </div>
                        <div>

                            <h4 data-i18n="Instruct mode">Instruct mode
                                <a href="https://docs.sillytavern.app/usage/core-concepts/instructmode/" class="notes-link" target="_blank">
                                    <span class="note-link-span">?</span>
                                </a>
                            </h4>
                            <div>
                                <label for="instruct_enabled" class="checkbox_label">
                                    <input id="instruct_enabled" type="checkbox" />
                                    <span data-i18n="Enabled">Enabled</span>
                                </label>
                                <label for="instruct_wrap" class="checkbox_label">
                                    <input id="instruct_wrap" type="checkbox" />
                                    <span data-i18n="Wrap Sequences with Newline">Wrap Sequences with Newline</span>
                                </label>
                                <label for="instruct_macro" class="checkbox_label">
                                    <input id="instruct_macro" type="checkbox" />
                                    <span data-i18n="Replace Macro in Sequences">Replace Macro in Sequences</span>
                                </label>
                                <label for="instruct_names" class="checkbox_label">
                                    <input id="instruct_names" type="checkbox" />
                                    <span data-i18n="Include Names">Include Names</span>
                                </label>
                            </div>
                            <label for="instruct_presets">
                                <span data-i18n="Presets">Presets</span>
                            </label>
                            <select id="instruct_presets"></select>
                            <label>
                                <span data-i18n="System Prompt">System Prompt</span>
                            </label>
                            <div class="prompt_overridden">
                                Overridden by the Character Definitions.
                            </div>
                            <textarea id="instruct_system_prompt" class="text_pole textarea_compact"></textarea>
                            <div class="flex-container">
                                <div class="flex1">
                                    <label for="instruct_input_sequence">
                                        <span data-i18n="Input Sequence">Input Sequence</span>
                                    </label>
                                    <div>
                                        <input id="instruct_input_sequence" class="text_pole textarea_compact" type="text" maxlength="100" />
                                    </div>
                                </div>
                                <div class="flex1">
                                    <label for="instruct_output_sequence">
                                        <span data-i18n="Output Sequence">Output Sequence</span>
                                    </label>
                                    <div>
                                        <input id="instruct_output_sequence" class="text_pole wide100p textarea_compact" type="text" maxlength="100" />
                                    </div>
                                </div>
                            </div>
                            <div class="flex-container">
                                <div class="flex1">
                                    <label for="instruct_system_sequence">
                                        <small data-i18n="System Sequence">System Sequence</small>
                                    </label>
                                    <div>
                                        <input id="instruct_system_sequence" class="text_pole textarea_compact" type="text" maxlength="100" />
                                    </div>
                                </div>
                                <div class="flex1">
                                    <label for="instruct_stop_sequence">
                                        <small data-i18n="Stop Sequence">Stop Sequence</small>
                                    </label>
                                    <div>
                                        <input id="instruct_stop_sequence" class="text_pole wide100p textarea_compact" type="text" maxlength="100" />
                                    </div>
                                </div>
                                <div class="flex1">
                                    <label for="instruct_separator_sequence">
                                        <small data-i18n="Separator">Separator</small>
                                    </label>
                                    <div>
                                        <input id="instruct_separator_sequence" class="text_pole wide100p textarea_compact" type="text" maxlength="100" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div name="ContextFormatting" class="flex1">
                        <h4><span data-i18n="Context Formatting">Context Formatting</span></h4>
                        <div>
                            <h4><span data-i18n="Tokenizer">Tokenizer</span>
                                <a href="https://docs.sillytavern.app/usage/core-concepts/advancedformatting/#tokenizer" class="notes-link" target="_blank">
                                    <span class="note-link-span">?</span>
                                </a>
                            </h4>
                            <select id="tokenizer">
                                <option value="0">None / Estimated</option>
                                <option value="1">GPT-3 (OpenAI)</option>
                                <option value="2">GPT-3 (Alternative / Classic)</option>
                                <option value="3">Sentencepiece (LLaMA)</option>
                                <option value="4">NerdStash (NovelAI Krake)</option>
                                <option value="5">NerdStash v2 (NovelAI Clio)</option>
                                <option value="6">API (WebUI)</option>
                            </select>
                        </div>
                        <div class="range-block">
                            <div class="range-block-title justifyLeft">
                                <span data-i18n="Token Padding">Token Padding</span>
                                <a href="https://docs.sillytavern.app/usage/core-concepts/advancedformatting/#token-padding" class="notes-link" target="_blank">
                                    <span class="note-link-span">?</span>
                                </a>
                            </div>
                            <input id="token_padding" class="text_pole textarea_compact" type="number" min="-2048" max="2048" />
                        </div>
                        <label class="checkbox_label" for="always-force-name2-checkbox">
                            <input id="always-force-name2-checkbox" type="checkbox" />
                            <span data-i18n="Always add character's name to prompt">
                                Always add character's name to prompt
                            </span>
                        </label>
                        <label class="checkbox_label" for="pin-examples-checkbox">
                            <input id="pin-examples-checkbox" type="checkbox" />
                            <span data-i18n="Keep Example Messages in Prompt">
                                Keep Example Messages in Prompt
                            </span>
                        </label>
                        <label class="checkbox_label" for="collapse-newlines-checkbox"><input id="collapse-newlines-checkbox" type="checkbox" />
                            <span data-i18n="Remove Empty New Lines from Output">
                                Remove Empty New Lines from Output
                            </span>
                        </label>
                        <div id="context-templates-block" class="template_element">
                            <h4>
                                Context Templates
                            </h4>
                            <div class="flex-container flexGap5">
                                <select id="context_template" class="flex1 margin0">
                                </select>
                                <div id="context_template_new" class="menu_button fa-solid fa-plus margin0" title="Create new" data-i18n="[title]Create New"></div>
                                <div id="context_template_edit" class="menu_button fa-solid fa-file-pen margin0" title="Edit" data-i18n="[title]Edit"></div>
                                <div id="context_template_rename" class="menu_button fa-solid fa-i-cursor margin0" title="Rename" data-i18n="[title]Rename"></div>
                                <div id="context_template_delete" class="menu_button fa-solid fa-trash-can margin0" title="Delete" data-i18n="[title]Delete"></div>
                            </div>
                        </div>
                        <div>
                            <h4>
                                <span data-i18n="Start Reply With">
                                    Start Reply With
                                </span>
                            </h4>
                            <div>
                                <textarea id="start_reply_with" rows="2" class="text_pole textarea_compact" data-i18n="[placeholder]AI reply prefix" placeholder="AI reply prefix"></textarea>
                            </div>
                            <label class="checkbox_label" for="chat-show-reply-prefix-checkbox"><input id="chat-show-reply-prefix-checkbox" type="checkbox" />
                                <span data-i18n="Show reply prefix in chat">
                                    Show reply prefix in chat
                                </span>
                            </label>
                            <h4>
                                <span data-i18n="Custom Stopping Strings">
                                    Custom Stopping Strings (KoboldAI/TextGen)
                                </span>
                                <div>
                                    <small>
                                        <span data-i18n="JSON serialized array of strings">JSON serialized array of strings, for example:</span><br>
                                        <span class="monospace">["\n", "\nUser:", "\nChar:"]</span>
                                    </small>
                                </div>
                            </h4>
                            <div>
                                <textarea id="custom_stopping_strings" rows="2" class="text_pole textarea_compact" placeholder="[&quot;Ford&quot;, &quot;BMW&quot;, &quot;Fiat&quot;]"></textarea>
                            </div>
                            <h4>
                                <span data-i18n="Pygmalion Formatting">
                                    Pygmalion Formatting
                                </span>
                            </h4>
                            <select id="pygmalion_formatting">
                                <option value="-1" data-i18n="Disabled for all models">
                                    Disabled for all models
                                </option>
                                <option value="0" data-i18n="Automatic (based on model name)">
                                    Automatic (based on model name)
                                </option>
                                <option value="1" data-i18n="Enabled for all models">
                                    Enabled for all models
                                </option>
                            </select>
                        </div>
                        <div>
                            <h4>
                                <span data-i18n="Multigen">Multigen</span>
                                <a href="https://docs.sillytavern.app/usage/core-concepts/advancedformatting/#multigen" class="notes-link" target="_blank">
                                    <span class="note-link-span">?</span>
                                </a>
                            </h4>
                            <label class="checkbox_label" for="multigen">
                                <input id="multigen" type="checkbox" />
                                <span data-i18n="Enabled">
                                    Enabled
                                </span>
                            </label>
                            <div class="multigen_settings_block">
                                <label for="multigen_1st_chunk">
                                    <small><span data-i18n="First chunk (tokens)">First chunk (tokens)</span></small>
                                    <input id="multigen_first_chunk" type="number" class="text_pole textarea_compact" min="1" max="512" />
                                </label>
                                <label for="multigen_next_chunk">
                                    <small><span data-i18n="Next chunks (tokens)">Next chunks (tokens)</span></small>
                                    <input id="multigen_next_chunks" type="number" class="text_pole textarea_compact" min="1" max="512" />
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div id="WI-SP-button" class="drawer">
            <div class="drawer-toggle drawer-header">
                <div id="WIDrawerIcon" class="drawer-icon fa-solid fa-book-atlas closedIcon " title="World Info & Soft Prompts" data-i18n="[title]World Info & Soft Prompts"></div>
            </div>
            <div id="WorldInfo" class="drawer-content closedDrawer">
                <div id="WorldInfoheader" class="fa-solid fa-grip drag-grabber"></div>
                <div id="WI_panel_pin_div" class="flex-container alignitemscenter gap10px" title="Locked = World Editor will stay open" data-i18n="[title]Locked = World Editor will stay open">
                    <input type="checkbox" id="WI_panel_pin">
                    <label for="WI_panel_pin">
                        <div class="unchecked fa-solid fa-unlock "></div>
                        <div class="checked fa-solid fa-lock "></div>
                    </label>
                    <h3>
                        <span data-i18n="Worlds/Lorebooks">Worlds/Lorebooks</span>
                        <a href="https://docs.sillytavern.app/usage/core-concepts/worldinfo/" class="notes-link" target="_blank">
                            <span class="note-link-span">?</span>
                        </a>
                    </h3>
                </div>
                <div id="wi-holder" class="margin5">
                    <div class="justifyContentSpaceAround wi-settings flex-container gap10px alignitemscenter">
                        <div id="WIMultiSelector" class="flex2 flex alignSelfStart range-block">
                            <div class="range-block-title justifyLeft">
                                <span data-i18n="Active World(s)"><small>Active World(s)</small></span>
                            </div>
                            <div class="range-block-range">
                                <select id="world_info" multiple>
                                    <option value="">
                                        <span data-i18n="-- World Info not found --">-- World Info not found --</span>
                                    </option>
                                </select>
                            </div>
                        </div>
                        <div class="flex2 flex-container flexFlowColumn">
                            <div class="flex range-block">
                                <div class="range-block-title justifyLeft">
                                    <label for="world_info_character_strategy">
                                        <span data-i18n="Character Lore Insertion Strategy"><small>Character Lore Insertion Strategy</small></span>
                                    </label>
                                </div>
                                <div class="range-block-range">
                                    <select id="world_info_character_strategy" class="flexGrow margin0">
                                        <option value="0" data-i18n="Sorted Evenly">Sorted Evenly</option>
                                        <option value="1" data-i18n="Character Lore First">Character Lore First</option>
                                        <option value="2" data-i18n="Global Lore First">Global Lore First</option>
                                    </select>
                                </div>
                            </div>

                            <div name="WIScanAndTokens" class="flex1 flex-container flexFlowColumn">
                                <div class="flex1 gap5px range-block">
                                    <div class="wide10pMinFit">
                                        <small data-i18n="Scan Depth">Scan Depth</small>
                                    </div>
                                    <div class="range-block-range-and-counter">
                                        <div class="range-block-range paddingLeftRight5">
                                            <input type="range" id="world_info_depth" name="volume" min="0" max="10" step="1">
                                        </div>
                                        <div class="range-block-counter margin0">
                                            <div contenteditable="true" data-for="world_info_depth" id="world_info_depth_counter">
                                                depth
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="flex1 gap5px range-block">
                                    <div class="wide10pMinFit">
                                        <small data-i18n="Token Budget">Context %</small>
                                    </div>
                                    <div class="range-block-range-and-counter ">
                                        <div class="range-block-range paddingLeftRight5">
                                            <input type="range" id="world_info_budget" name="volume" min="1" max="100" step="1">
                                        </div>
                                        <div class="range-block-counter margin0">
                                            <div contenteditable="true" data-for="world_info_budget" id="world_info_budget_counter">
                                                budget
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="alignitemsflexstart flex1 range-block flex-container flexFlowColumn">
                            <label title="Entries can activate other entries by mentioning their keywords" data-i18n="[title]Entries can activate other entries by mentioning their keywords" class="checkbox_label">
                                <input id="world_info_recursive" type="checkbox" />
                                <small data-i18n="Recursive Scan">
                                    Recursive Scan
                                </small>
                            </label>
                            <label title="Lookup for the entry keys in the context will respect the case" data-i18n="[title]Lookup for the entry keys in the context will respect the case" class="checkbox_label">
                                <input id="world_info_case_sensitive" type="checkbox" />
                                <small data-i18n="Case Sensitive">
                                    Case-sensitive
                                </small>
                            </label>
                            <label title="If the entry key consists of only one word, it would not be matched as part of other words" data-i18n="[title]If the entry key consists of only one word, it would not be matched as part of other words" class="checkbox_label">
                                <input id="world_info_match_whole_words" type="checkbox" />
                                <small data-i18n="Match whole words">
                                    Match whole words
                                </small>
                            </label>
                        </div>
                    </div>

                    <div id="world_popup">
                        <hr>
                        <div id="world_popup_text">
                            <div id="world_popup_header" class="flex-container flexGap5">
                                <div class="world_popup_logo_block">
                                    <h3 data-i18n="World/Lore Editor">
                                        World/Lore Editor
                                        <a href="https://docs.sillytavern.app/usage/core-concepts/worldinfo/#world-info-entry" class="notes-link" target="_blank"><span class="note-link-span">?</span></a>
                                    </h3>
                                </div>
                                <div id="OpenAllWIEntries" class="menu_button fa-solid fa-expand" title="Open all Entries" data-i18n="[title]Open all Entries"></div>
                                <div id="CloseAllWIEntries" class="menu_button fa-solid fa-compress" title="Close all Entries" data-i18n="[title]Close all Entries"></div>
                                <div id="world_popup_new" class="menu_button fa-solid fa-plus" title="New Entry" data-i18n="[title]New Entry"></div>
                                <div class="flex-container">
                                    <form id="form_world_import" action="javascript:void(null);" method="post" enctype="multipart/form-data">
                                        <input type="file" id="world_import_file" accept=".json,.lorebook,.png" name="avatar" hidden>
                                    </form>
                                    <form id="form_rename_world" action="javascript:void(null);" method="post" enctype="multipart/form-data">
                                        <div id="world_create_button" class="menu_button fa-solid fa-globe fa-fw" title="Create" data-i18n="[title]Create"></div>
                                        <div id="world_import_button" class="menu_button fa-solid fa-file-import fa-fw" title="Import World Info" data-i18n="[title]Import World Info"></div>
                                        <div id="world_popup_export" class="menu_button fa-solid fa-file-export margin0 fa-fw" title="Export World Info" data-i18n="[title]Export World Info"></div>
                                        <div id="world_popup_delete" class="menu_button fa-solid fa-trash-can redWarningBG margin0 fa-fw" title="Delete World Info" data-i18n="[title]Delete World Info"></div>
                                        <span data-i18n="Editing:">&nbsp;Editing:</span>
                                        <select id="world_editor_select" class="margin0">
                                            <option value="" data-i18n="--- None ---">--- None ---</option>
                                        </select>
                                        <div id="world_popup_name_button" class="menu_button fa-solid fa-i-cursor fa-fw" title="Rename World Info" data-i18n="[title]Rename World Info"></div>
                                    </form>

                                </div>
                            </div>
                        </div>

                        <div id="world_popup_entries_list">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div id="user-settings-button" class="drawer">
            <div class="drawer-toggle">
                <div class="drawer-icon fa-solid fa-user-cog closedIcon" title="User Settings" data-i18n="[title]User Settings"></div>
            </div>
            <div id="user-settings-block" class="drawer-content closedDrawer">
                <div class="flex-container wide100p alignitemscenter spaceBetween">
                    <h3><span data-i18n="User Settings">User Settings</span></h3>
                    <div id="version_display"></div>
                </div>
                <div class="flex-container spaceEvenly">
                    <div id="UI-Theme-Block" class="flex-container flexFlowColumn drawer33pWidth">
                        <div id="color-picker-block" class="flex-container flexFlowColumn">
                            <h4><span data-i18n="UI Colors">UI Colors</span></h4>
                            <div class="flex-container">
                                <toolcool-color-picker id="main-text-color-picker"></toolcool-color-picker>
                                <span data-i18n="Main Text">Main Text</span>
                            </div>
                            <div class="flex-container">
                                <toolcool-color-picker id="italics-color-picker"></toolcool-color-picker>
                                <span data-i18n="Italics Text">Italics Text</span>
                            </div>
                            <div class="flex-container">
                                <toolcool-color-picker id="quote-color-picker"></toolcool-color-picker>
                                <span data-i18n="Quote Text">Quote Text</span>
                            </div>
                            <div class="flex-container">
                                <toolcool-color-picker id="shadow-color-picker"></toolcool-color-picker>
                                <span data-i18n="Shadow Color">Text Shadow</span>
                            </div>
                            <!--                             <div class="flex-container">
                                <toolcool-color-picker id="fastui-bg-color-picker"></toolcool-color-picker>
                                <span data-i18n="FastUI BG">FastUI BG</span>
                            </div> -->
                            <div class="flex-container">
                                <toolcool-color-picker id="blur-tint-color-picker"></toolcool-color-picker>
                                <span data-i18n="Blur Tint">UI Background</span>
                            </div>
                            <div class="flex-container">
                                <toolcool-color-picker id="user-mes-blur-tint-color-picker"></toolcool-color-picker>
                                <span data-i18n="User Message Blur Tint">User Message</span>
                            </div>
                            <div class="flex-container">
                                <toolcool-color-picker id="bot-mes-blur-tint-color-picker"></toolcool-color-picker>
                                <span data-i18n="AI Message Blur Tint">AI Message</span>
                            </div>
                            <div id="font-blur-UIpresets-block" class="flex-container flexFlowColumn">
                                <div id="font-scale-block" class="range-block">
                                    <div class="range-block-title" data-i18n="Font Scale">
                                        Font Scale
                                    </div>
                                    <div class="range-block-range-and-counter">
                                        <div class="range-block-range">
                                            <input type="range" id="font_scale" name="font_scale" min="0.8" max="1.2" step="0.05">
                                        </div>
                                        <div class="range-block-counter">
                                            <div contenteditable="true" data-for="font_scale" id="font_scale_counter">
                                                select
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div id="blur-strength-block" class="range-block">
                                    <div class="range-block-title" data-i18n="Blur Strength">
                                        Blur Strength
                                    </div>
                                    <div class="range-block-range-and-counter">
                                        <div class="range-block-range">
                                            <input type="range" id="blur_strength" name="blur_strength" min="0" max="30" step="1">
                                        </div>
                                        <div class="range-block-counter">
                                            <div contenteditable="true" data-for="blur_strength" id="blur_strength_counter">
                                                select
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div id="shadow-width-block" class="range-block">
                                    <div class="range-block-title" data-i18n="Text Shadow Width">
                                        Text Shadow Width
                                    </div>
                                    <div class="range-block-range-and-counter">
                                        <div class="range-block-range">
                                            <input type="range" id="shadow_width" name="shadow_width" min="0" max="5" step="1">
                                        </div>
                                        <div class="range-block-counter">
                                            <div contenteditable="true" data-for="shadow_width" id="shadow_width_counter">
                                                select
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div id="UI-presets-block" class="flex-container flexFlowColumn">
                                <h4>
                                    <span data-i18n="UI Theme Preset">UI Theme Preset</span>
                                </h4>
                                <div class="flex-container flexnowrap alignitemscenter">
                                    <select id="themes" class="margin0 margin-r5">
                                    </select>
                                    <div id="ui-preset-save-button" title="Save changes to a new theme file" data-i18n="[title]Save changes to a new theme file" class="menu_button padding5 margin0">
                                        <i class="fa-solid fa-save"></i>
                                    </div>
                                </div>
                            </div>
                            <div id="MovingUI-presets-block" class="flex-container flexFlowColumn">
                                <h4>
                                    <span data-i18n="MovingUI Preset">MovingUI Preset</span>
                                </h4>
                                <div class="flex-container flexnowrap alignitemscenter">
                                    <select id="movingUIPresets" class="margin0 margin-r5">
                                    </select>
                                    <div id="movingui-preset-save-button" title="Save changes to a new MovingUI preset file" data-i18n="[title]Save movingUI changes to a new file" class="menu_button padding5 margin0">
                                        <i class="fa-solid fa-save"></i>
                                    </div>
                                </div>
                                <div id="movingUIreset" class="menu_button whitespacenowrap" data-i18n="Reset Panels">
                                    Reset MovingUI
                                </div>
                            </div>
                        </div>

                    </div>
                    <div name="UI Customization" class="flex-container drawer33pWidth">
                        <div class="ui-settings">
                            <h4><span data-i18n="UI Customization">UI Customization</span></h4>
                            <div class="range-block">
                                <div class="range-block-title" data-i18n="Chat Width (PC)">
                                    Chat Width (PC)
                                </div>
                                <div class="range-block-range-and-counter">
                                    <div class="range-block-range">
                                        <input id="chat_width_slider" class="wide100p" type="range" min="25" max="75" step="1" value="50">
                                        <div class="slider_hint">
                                            <span>25%</span>
                                            <span>50%</span>
                                            <span>75%</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div>
                                <span data-i18n="Avatar Style">Avatar Style:</span><br>
                                <label>
                                    <input name="avatar_style" type="radio" value="0" />
                                    <span data-i18n="Circle">Circle</span>
                                </label>
                                <label>
                                    <input name="avatar_style" type="radio" value="1" />
                                    <span data-i18n="Rectangle">Rectangle</span>
                                </label>
                            </div>
                            <div>
                                <span data-i18n="Chat Style:">Message Style:</span><br>
                                <select id="chat_display">
                                    <option value="0" data-i18n="Default">Flat Chat</span>
                                    <option value="1" data-i18n="Bubbles">Bubble Chat</option>
                                    <option value="2" data-i18n="Document">Single Document</option>
                                </select>
                            </div>
                            <div>
                                <label for="play_message_sound" class="checkbox_label">
                                    <input id="play_message_sound" type="checkbox" />
                                    <audio id="audio_message_sound" src="sounds/message.mp3" hidden></audio>
                                    <span>
                                        <span data-i18n="Message Sound">Message Sound</span>
                                        <a href="https://docs.sillytavern.app/usage/core-concepts/uicustomization/#message-sound" class="notes-link" target="_blank">
                                            <span class="note-link-span">?</span>
                                        </a>
                                    </span>
                                </label>
                                <label for="play_sound_unfocused" class="checkbox_label">
                                    <input id="play_sound_unfocused" type="checkbox" />
                                    <span data-i18n="Background Sound Only">Background Sound Only</span>
                                </label>
                                <label for="fast_ui_mode" class="checkbox_label" title="removes blur and uses alternative background color for divs" data-i18n="[title]removes blur and uses alternative background color for divs">
                                    <input id="fast_ui_mode" type="checkbox" />
                                    <span data-i18n="No Blur Effect">No Blur Effect</span>
                                </label>
                                <label for="noShadowsmode" class="checkbox_label">
                                    <input id="noShadowsmode" type="checkbox" />
                                    <span data-i18n="No Text Shadows">No Text Shadows</span>
                                </label>
                                <label for="waifuMode" class="checkbox_label">
                                    <input id="waifuMode" type="checkbox" />
                                    <span data-i18n="Waifu Mode">Visual Novel Mode</span>
                                </label>

                                <label for="messageTimerEnabled" class="checkbox_label">
                                    <input id="messageTimerEnabled" type="checkbox" />
                                    <span data-i18n="Message Timer">Message Timer</span>
                                </label>

                                <label for="messageTimestampsEnabled" class="checkbox_label">
                                    <input id="messageTimestampsEnabled" type="checkbox" />
                                    <span data-i18n="Chat Timestamps">Chat Timestamps</span>
                                </label>

                                <label for="mesIDDisplayEnabled" class="checkbox_label">
                                    <input id="mesIDDisplayEnabled" type="checkbox" />
                                    <span data-i18n="Message IDs">Show Message IDs</span>
                                </label>

                                <label for="auto_scroll_chat_to_bottom" class="checkbox_label">
                                    <input id="auto_scroll_chat_to_bottom" type="checkbox" />
                                    <span data-i18n="Auto-scroll Chat">Auto-scroll Chat</span>
                                </label>

                                <label for="hotswapEnabled" class="checkbox_label">
                                    <input id="hotswapEnabled" type="checkbox" />
                                    <span data-i18n="Characters Hotswap">Characters Hotswap</span>
                                </label>

                                <label id="movingUIModeCheckBlock" for="movingUImode" class="checkbox_label">
                                    <input id="movingUImode" type="checkbox" />
                                    <span data-i18n="Movable UI Panels">Movable UI Panels</span>
                                </label>

                                <div class="flex-container flexFlowColumn">
                                    <h4 data-i18n="Send on Enter">
                                        Send on Enter
                                    </h4>
                                    <select id="send_on_enter">
                                        <option value="-1" data-i18n="Always disabled">Always disabled</option>
                                        <option value="0" data-i18n="Automatic (desktop)">Automatic (desktop)</option>
                                        <option value="1" data-i18n="Always enabled">Always enabled</option>
                                    </select>
                                </div>


                            </div>
                        </div>

                    </div>

                    <div id="power-user-options-block" class="flex-container drawer33pWidth">
                        <div id="power-user-option-checkboxes">
                            <h4 data-i18n="Power User Options">Power User Options</h4>
                            <label for="swipes-checkbox">
                                <input id="swipes-checkbox" type="checkbox" />
                                <span data-i18n="Swipes">Swipes</span>
                            </label>
                            <label for="prefer_character_prompt" title="If checked and the character card contains a prompt override (System Prompt), use that instead." data-i18n="[title]If checked and the character card contains a prompt override (System Prompt), use that instead." class="checkbox_label">
                                <input id="prefer_character_prompt" type="checkbox" />
                                <span data-i18n="Prefer Character Card Prompt">Prefer Char. Prompt</span>
                            </label>
                            <label for="prefer_character_jailbreak" title="If checked and the character card contains a jailbreak override (Post History Instruction), use that instead." data-i18n="[title]If checked and the character card contains a jailbreak override (Post History Instruction), use that instead." class="checkbox_label">
                                <input id="prefer_character_jailbreak" type="checkbox" />
                                <span data-i18n="Prefer Character Card Jailbreak">Prefer Char. JB</span>
                            </label>
                            <label class="checkbox_label" for="continue_on_send">
                                <input id="continue_on_send" type="checkbox" />
                                <span data-i18n="Press Send to continue">
                                    Press "Send" to continue
                                </span>
                            </label>
                            <label for="auto-load-chat-checkbox"><input id="auto-load-chat-checkbox" type="checkbox" />
                                <span data-i18n="Auto-load Last Chat">Auto-load Last Chat</span>
                            </label>
                            <label for="auto_save_msg_edits"><input id="auto_save_msg_edits" type="checkbox" />
                                <span data-i18n="Auto-save Message Edits">Auto-save Message Edits</span>
                            </label>
                            <label for="auto_fix_generated_markdown">
                                <input id="auto_fix_generated_markdown" type="checkbox" />
                                <span data-i18n="Auto-fix Markdown">Auto-fix Markdown</span>
                            </label>
                            <label class="checkbox_label" for="allow_name2_display">
                                <input id="allow_name2_display" type="checkbox" />
                                <span data-i18n="Allow {{char}}: in bot messages">Show {{char}}: in responses</span>
                            </label>
                            <label class="checkbox_label" for="allow_name1_display">
                                <input id="allow_name1_display" type="checkbox" />
                                <span data-i18n="Allow {{user}}: in bot messages">Show {{user}}: in responses</span>
                            </label>
                            <!-- <label class="checkbox_label" for="removeXML">
                                <input id="removeXML" type="checkbox" />
                                <span data-i18n="Remove XML/HTML tags from responses">Remove &lt;tags&gt; from responses</span>
                            </label> -->
                            <label for="console_log_prompts">
                                <input id="console_log_prompts" type="checkbox" />
                                <span data-i18n="Log prompts to console">Log prompts to console</span>
                            </label>
                            <label for="render_formulas">
                                <input id="render_formulas" type="checkbox" />
                                <span data-i18n="Render Formulas">Render Formulas</span>
                                <a href="https://docs.sillytavern.app/usage/core-concepts/uicustomization/#formulas-rendering" class="notes-link" target="_blank">
                                    <span class="note-link-span">?</span>
                                </a>
                            </label>
                            <label for="never_resize_avatars"><input id="never_resize_avatars" type="checkbox" />
                                <span data-i18n="Never resize avatars">Never resize avatars</span>
                            </label>
                            <label for="show_card_avatar_urls"><input id="show_card_avatar_urls" type="checkbox" />
                                <span data-i18n="Show avatar filenames">Show avatar filenames</span>
                            </label>
                            <label for="import_card_tags"><input id="import_card_tags" type="checkbox" />
                                <span data-i18n="Import Card Tags">Import Card Tags</span>
                            </label>
                            <label for="confirm_message_delete"><input id="confirm_message_delete" type="checkbox" />
                                <span data-i18n="Confirm message deletion">Confirm message deletion</span>
                            </label>
                            <label for="spoiler_free_mode"><input id="spoiler_free_mode" type="checkbox" />
                                <span data-i18n="Spoiler Free Mode">Spolier Free Mode</span>
                            </label>

                            <div class="inline-drawer wide100p flexFlowColumn">
                                <div class="inline-drawer-toggle inline-drawer-header">
                                    <b><span data-i18n="Auto-swipe">Auto-swipe</span></b>
                                    <div class="fa-solid fa-circle-chevron-down inline-drawer-icon down"></div>
                                </div>
                                <div class="inline-drawer-content">
                                    <label class="checkbox_label" for="auto_swipe">
                                        <input id="auto_swipe" type="checkbox" />
                                        <span data-i18n="Enabled">Enabled</span>
                                    </label>
                                    <div data-i18n="Minimum generated message length">Minimum generated message length</div>
                                    <input id="auto_swipe_minimum_length" name="auto_swipe_minimum_length" type="number" min="0" step="1" value="0" class="text_pole">
                                    <div data-i18n="Blacklisted words">Blacklisted words</div>
                                    <div class="auto_swipe">
                                        <textarea id="auto_swipe_blacklist" name="auto_swipe_blacklist" data-i18n="[placeholder]words you dont want generated separated by comma ','" placeholder="words you dont want generated separated by comma ','" class="text_pole textarea_compact" maxlength="5000" value="" autocomplete="off" rows="3"></textarea>
                                        <div data-i18n="Blacklisted word count to swipe">Blacklisted word count to swipe</div>
                                        <input id="auto_swipe_blacklist_threshold" name="auto_swipe_blacklist_threshold" type="number" min="0" step="1" value="1" class="text_pole">
                                    </div>
                                </div>
                            </div>

                            <div id="reload_chat" class="menu_button whitespacenowrap" data-i18n="Reload Chat">
                                Reload Chat
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>

        <div id="logo_block" class="drawer" title="Change Background Image" data-i18n="[title]Change Background Image">
            <div id="site_logo" class="drawer-toggle drawer-header">
                <div class="drawer-icon fa-solid fa-panorama  closedIcon"></div>
            </div>
            <div class="drawer-content closedDrawer">
                <div class="flex-container">
                    <input id="bg-filter" placeholder="Filter" class="text_pole" type="search" />
                    <div id="bg_menu_content">
                        <form id="form_bg_download" class="bg_example no-border no-shadow" action="javascript:void(null);" method="post" enctype="multipart/form-data">
                            <label class="input-file">
                                <input type="file" id="add_bg_button" name="avatar" accept="image/png, image/jpeg, image/jpg, image/gif, image/bmp">
                                <div class="bg_example no-border no-shadow add_bg_but" style="background-image: url('/img/addbg3.png');"></div>
                            </label>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <div id="extensions-settings-button" class="drawer">
            <div class="drawer-toggle">
                <div class="drawer-icon fa-solid fa-cubes  closedIcon" title="Extensions" data-i18n="[title]Extensions"></div>
            </div>
            <div id="rm_extensions_block" class="drawer-content closedDrawer">
                <div class="extensions_block flex-container">
                    <div class="alignitemscenter flex-container justifyCenter wide100p" style="justify-content: space-between;">
                        <h3 class="margin0" data-i18n="Extensions API:">Extensions API:
                            <a target="_blank" href="https://github.com/SillyTavern/SillyTavern-extras">
                                SillyTavern-extras
                            </a>
                        </h3>
                        <div class="flex-container">
                            <div id="extensions_status" data-i18n="Not Connected">Not Connected</div>
                            <label for="extensions_autoconnect">
                                <input id="extensions_autoconnect" type="checkbox">
                                <span data-i18n="Auto-connect">Auto-connect</span>
                            </label>
                        </div>
                    </div>
                    <div class="alignitemsflexstart flex-container wide100p">
                        <input id="extensions_url" type="text" class="flex1 heightFitContent text_pole widthNatural" maxlength="250" data-i18n="[placeholder]Extensions URL" placeholder="Extensions URL">
                        <input id="extensions_api_key" type="text" class="flex1 heightFitContent text_pole widthNatural" maxlength="250" data-i18n="[placeholder]API key" placeholder="API key">
                        <div class="alignitemsflexstart extensions_url_block">
                            <div class="" style="text-align: center">
                                <input id="extensions_connect" class="menu_button" type="submit" value="Connect">
                            </div>
                            <input id="extensions_details" class="alignitemsflexstart menu_button" type="button" value="Manage extensions">
                            <div id="third_party_extension_button" title="Import Extension From Git Repo" class="menu_button fa-solid fa-cloud-arrow-down faSmallFontSquareFix"></div>
                        </div>
                    </div>
                    <div id="extensions_settings" class="flex1 wide50p">
                    </div>
                    <div id="extensions_settings2" class="flex1 wide50p">
                    </div>

                </div>
            </div>
        </div>

        <div id="persona-management-button" class="drawer">
            <div class="drawer-toggle">
                <div class="drawer-icon fa-solid fa-face-smile closedIcon" title="Persona Management" data-i18n="[title]Persona Management"></div>
            </div>
            <div class="drawer-content closedDrawer">
                <div class="flex-container wide100p alignitemscenter spaceBetween">
                    <h3><span data-i18n="Persona Management">Persona Management</span></h3>
                    <a href="https://docs.sillytavern.app/usage/core-concepts/personas/" target="_blank" data-i18n="How do I use this?">How do I use this?</a>
                    <div id="persona-management-block" class="flex-container wide100p">
                        <div class="flex1">
                            <h4 data-i18n="Name">Name</h4>
                            <div class="change_name">
                                <input id="your_name" name="your_name" data-i18n="[placeholder]Enter your name" placeholder="Enter your name" class="text_pole wide100p" maxlength="50" value="" autocomplete="off">
                                <div id="your_name_button" class="menu_button fa-solid fa-check" title="Click to set a new User Name" data-i18n="[title]Click to set a new User Name">
                                </div>
                                <div id="lock_user_name" class="menu_button fa-solid fa-unlock" title="Click to lock your selected persona to the current chat. Click again to remove the lock." data-i18n="[title]Click to lock your selected persona to the current chat. Click again to remove the lock.">
                                </div>
                                <div id="sync_name_button" class="menu_button fa-solid fa-sync" title="Click to set user name for all messages" data-i18n="[title]Click to set user name for all messages">
                                </div>
                            </div>
                            <div>
                                <h4 data-i18n="Persona Description">Persona Description</h4>
                                <textarea id="persona_description" name="persona_description" placeholder="Example:&#10;[{{user}} is a 28-year-old Romanian cat girl.]" class="text_pole textarea_compact" maxlength="5000" value="" autocomplete="off" rows="4"></textarea>
                                <label for="persona_description_position" data-i18n="Position:">Position:</label>
                                <select id="persona_description_position">
                                    <option value="0" data-i18n="Before Character Card">Before Character Card</option>
                                    <option value="1" data-i18n="After Character Card">After Character Card</option>
                                    <option value="2" data-i18n="Top of Author's Note">Top of Author's Note</option>
                                    <option value="3" data-i18n="Bottom of Author's Note">Bottom of Author's Note</option>
                                </select>
                            </div>
                        </div>
                        <div class="flex1">
                            <h4 data-i18n="Your Avatar" class="title_restorable">
                                <span>Your Persona</span>
                                <div id="create_dummy_persona" class="menu_button menu_button_icon" title="Create a dummy persona" data-i18n="[title]Create a dummy persona">
                                    <i class="fa-solid fa-person-circle-question fa-fw"></i>
                                    <span>Blank</span>
                                </div>
                            </h4>
                            <div id="user_avatar_block">
                                <div class="avatar_upload">+</div>
                            </div>

                            <form id="form_upload_avatar" action="javascript:void(null);" method="post" enctype="multipart/form-data">
                                <input type="file" id="avatar_upload_file" accept="image/*" name="avatar">
                                <input type="hidden" id="avatar_upload_overwrite" name="overwrite_name" value="">
                            </form>
                                <button class="menu_button menu_button_icon user_stats_button" title="Click for stats!">
                                    <i class="fa-solid fa-circle-info"></i>Usage Stats
                                </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div id="rightNavHolder" class="drawer">
            <div id="unimportantYes" class="drawer-toggle drawer-header">
                <div id="rightNavDrawerIcon" class="drawer-icon fa-solid fa-address-card  closedIcon" title="Character Management" data-i18n="[title]Character Management">
                </div>
            </div>
            <nav id="right-nav-panel" class="drawer-content closedDrawer fillRight">
                <div id="right-nav-panelheader" class="fa-solid fa-grip drag-grabber">

                </div>
                <div id="CharListButtonAndHotSwaps" class="flex-container flexnowrap">
                    <div class="flexFlowColumn flex-container">
                        <div id="rm_button_panel_pin_div" class="alignitemsflexstart" title="Locked = Character Management panel will stay open" data-i18n="[title]Locked = Character Management panel will stay open">
                            <input type="checkbox" id="rm_button_panel_pin">
                            <label for="rm_button_panel_pin">
                                <div class="fa-solid unchecked  fa-unlock" alt=""></div>
                                <div class="fa-solid checked  fa-lock" alt=""></div>
                            </label>
                        </div>
                        <div class="right_menu_button fa-solid fa-list-ul" id="rm_button_characters" title="Select/Create Characters" data-i18n="[title]Select/Create Characters"></div>
                    </div>
                    <div name="HotSwapWrapper" class="alignitemscenter flex-container margin0auto">
                        <div class="hotswap flex-container flex1"></div>
                    </div>

                </div>
                <hr>
                <!-- this div structure must be preserved until group peeking can adjust -->
                <div id="rm_PinAndTabs">
                    <div id="right-nav-panel-tabs" class="">
                        <div id="rm_button_selected_ch">
                            <h2></h2>
                        </div>
                    </div>
                </div>
                <!-- end group peeking cope structure-->



                <div name="Solo Char Create/Edit Panel" id="rm_ch_create_block" class="right_menu flex-container flexFlowColumn" style="display: none;">
                    <form id="form_create" action="javascript:void(null);" method="post" enctype="multipart/form-data">

                        <div id="avatar-and-name-block">
                            <div id="name_div">
                                <input id="character_name_pole" name="ch_name" class="text_pole" data-i18n="[placeholder]Name this character" placeholder="Name this character" maxlength="50" value="" autocomplete="off">
                            </div>

                            <div id="result_info" class="flex-container" title="Token counts may be inaccurate and provided just for reference." data-i18n="[title]Token counts may be inaccurate and provided just for reference.">&nbsp;</div>

                            <div id="avatar_div" class="avatar_div alignitemsflexstart justifySpaceBetween flexnowrap flexGap5">
                                <label id="avatar_div_div" class="add_avatar avatar" for="add_avatar_button" title="Click to select a new avatar for this character" data-i18n="[title]Click to select a new avatar for this character">
                                    <img id="avatar_load_preview" src="img/ai4.png" alt="avatar">
                                    <input hidden type="file" id="add_avatar_button" name="avatar" accept="image/png, image/jpeg, image/jpg, image/gif, image/bmp">
                                </label>
                                <div class="flex-container flexFlowColumn">
                                    <div class="flex-container flexFlowColumn">
                                        <div class="flex-container justifyContentFlexEnd flexFlowColumn">
                                            <div class="form_create_bottom_buttons_block">
                                                <div id="rm_button_back" class="menu_button fa-solid fa-left-long "></div>

                                                <!-- <div id="renameCharButton" class="menu_button fa-solid fa-user-pen" title="Rename Character"></div> -->
                                                <div id="favorite_button" class="menu_button fa-solid fa-star" title="Add to Favorites" data-i18n="[title]Add to Favorites"></div>
                                                <input type="hidden" id="fav_checkbox" name="fav" />
                                                <div id="advanced_div" class="menu_button fa-solid fa-book " title="Advanced Definitions" data-i18n="[title]Advanced Definition"></div>
                                                <div id="world_button" class="menu_button fa-solid fa-globe" title="Character Lore" data-i18n="[title]Character Lore"></div>
                                                <div id="export_button" class="menu_button fa-solid fa-file-export " title="Export and Download" data-i18n="[title]Export and Download"></div>
                                                <!-- <div id="set_chat_scenario" class="menu_button fa-solid fa-scroll" title="Set a chat scenario override"></div> -->
                                                <!-- <div id="set_character_world" class="menu_button fa-solid fa-globe" title="Set a character World Info / Lorebook"></div> -->
                                                <div id="dupe_button" class="menu_button fa-solid fa-clone " title="Duplicate Character" data-i18n="[title]Duplicate Character"></div>
                                                <label for="create_button" id="create_button_label" class="menu_button fa-solid fa-user-check" title="Create Character" data-i18n="[title]Create Character">
                                                    <input type="submit" id="create_button" name="create_button">
                                                </label>
                                                <div id="delete_button" class="menu_button fa-solid fa-skull " title="Delete Character" data-i18n="[title]Delete Character"></div>
                                            </div>
                                            <label class="flex1" for="char-management-dropdown">
                                                <select id="char-management-dropdown">
                                                    <option value="default" disabled selected data-i18n="More...">More...</option>
                                                    <option id="set_character_world" data-i18n="Link to World Info">
                                                        Link to World Info
                                                    </option>
                                                    <option id="import_character_info" data-i18n="Import Card Lore">
                                                        Import Card Lore
                                                    </option>
                                                    <option id="set_chat_scenario" data-i18n="Scenario Override">
                                                        Scenario Override
                                                    </option>
                                                    <option id="renameCharButton" data-i18n="Rename">
                                                        Rename
                                                    </option>
                                                    <!--<option id="dupe_button">
                                                        Duplicate
                                                    </option>
                                                    <option id="export_button">
                                                        Export
                                                    </option>
                                                    <option id="delete_button">
                                                        Delete
                                                    </option>-->
                                                </select>
                                            </label>
                                        </div>

                                        <div id="tags_div" class="marginBot5">
                                            <div class="tag_controls">
                                                <input id="tagInput" class="text_pole tag_input wide100p margin0" data-i18n="[placeholder]Search / Create Tags" placeholder="Search / Create tags" maxlength="25" />
                                                <div class="tags_view menu_button fa-solid fa-tags" title="View all tags" data-i18n="[title]View all tags"></div>
                                            </div>
                                            <div id="tagList" class="tags"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <hr>



                        <div id="description_div" class="marginBot5">
                            <span data-i18n="Character Description">Description</span>
                            <a href="https://docs.sillytavern.app/usage/core-concepts/characterdesign/#character-description" class="notes-link" target="_blank">
                                <span class="note-link-span">?</span>
                            </a>
                        </div>

                        <textarea id="description_textarea" data-i18n="[placeholder]Describe your character's physical and mental traits here." placeholder="Describe your character's physical and mental traits here." class="marginBot5" name="description" placeholder=""></textarea>

                        <div id="first_message_div" class="marginBot5 title_restorable">
                            <span>
                                <span data-i18n="First message">First message</span>
                                <a href="https://docs.sillytavern.app/usage/core-concepts/characterdesign/#first-message" class="notes-link" target="_blank">
                                    <span class="note-link-span">?</span>
                                </a>
                            </span>
                            <div class="menu_button open_alternate_greetings" title="Click to set additional greeting messages" data-i18n="[title]Click to set additional greeting messages">
                                <i class="fa-solid fa-comment-dots"></i>
                            </div>
                        </div>
                        <textarea id="firstmessage_textarea" data-i18n="[placeholder]This will be the first message from the character that starts every chat." placeholder="This will be the first message from the character that starts every chat." class="marginBot5" name="first_mes" placeholder=""></textarea>
                        <div id="spoiler_free_desc">
                            <div id="creators_notes_div" class="marginBot5 title_restorable">
                                <span data-i18n="Creator's Notes">Creator's Notes</span>
                                <div id="spoiler_free_desc_button" class="menu_button fa-solid fa-eye" title="Show / Hide Description and First Message" data-i18n="[title]Show / Hide Description and First Message"></div>
                                </a>
                            </div>
                            <hr>

                            <div id="creator_notes_spoiler" data-i18n="[placeholder]Creator's Notes" placeholder="Creator's Notes" class="marginBot5" name="creator_notes_spoiler"></div>
                            <!-- A button to show / hide description_div and description_textarea and first_message_div and firstmessage_textarea-->
                        </div>

                        <!-- these divs are invisible and used for server communication purposes -->
                        <div id="hidden-divs">
                            <input id="character_json_data" name="json_data" type="hidden">
                            <input id="avatar_url_pole" name="avatar_url" type="hidden">
                            <input id="selected_chat_pole" name="chat" type="hidden">
                            <input id="create_date_pole" name="create_date" type="hidden">
                            <input id="last_mes_pole" name="last_mes" type="hidden">
                            <input id="character_world" name="world" type="hidden">
                        </div>

                        <!-- now back to normal divs for display purposes-->
                    </form>
                </div>

                <div name="Group Chat Edit Panel" id="rm_group_chats_block" class="right_menu flex-container flexNoGap">

                    <div class="inline-drawer wide100p flexFlowColumn">
                        <div id="groupControlsToggle" class="inline-drawer-toggle inline-drawer-header">
                            <span data-i18n="Group Controls">Group Controls</span>
                            <div class="fa-solid fa-circle-chevron-down inline-drawer-icon down"></div>
                        </div>
                        <div class="inline-drawer-content">
                            <div name="group-metadata-controls" class="marginTopBot5">
                                <input id="rm_group_chat_name" class="text_pole wide100p" type="text" name="chat_name" data-i18n="[placeholder]Chat Name (Optional)" placeholder="Chat Name (Optional)" maxlength="100" />
                                <div id="group_tags_div" class="wide100p">
                                    <div class="tag_controls">
                                        <input id="groupTagInput" class="text_pole tag_input flex1 margin0" data-i18n="[placeholder]Search / Create Tags" placeholder="Search / Create tags" maxlength="25" />
                                        <div class="tags_view menu_button fa-solid fa-tags margin0" title="View all tags" data-i18n="[title]View all tags"></div>
                                    </div>
                                    <div id="groupTagList" class="tags paddingTopBot5"></div>
                                </div>
                                <div id="rm_group_top_bar" class="flex-container alignitemscenter spaceBetween width100p">
                                    <div>
                                        <label class="add_avatar avatar flex-container justifyCenter" for="group_avatar_button" title="Click to select a new avatar for this group" data-i18n="[title]Click to select a new avatar for this group">
                                            <div id="group_avatar_preview">
                                                <div class="avatar">
                                                    <img src="img/ai4.png" alt="avatar">
                                                </div>
                                            </div>
                                            <input hidden type="file" id="group_avatar_button" name="avatar" accept="image/png, image/jpeg, image/jpg, image/gif, image/bmp">
                                        </label>
                                    </div>
                                    <div name="GroupStragegyAndOrder" id="rm_group_buttons" class="fontsize80p flex-container paddingLeftRight5 flex2">
                                        <div class="">
                                            <div class="flex-container flexnowrap width100p whitespacenowrap">
                                                <span data-i18n="Group reply strategy">Group reply strategy</span>
                                                <a href="https://docs.sillytavern.app/usage/core-concepts/groupchats/" class="notes-link" target="_blank">
                                                    <span class="note-link-span">?</span>
                                                </a>
                                            </div>
                                            <label class="checkbox_label flexnowrap whitespacenowrap">
                                                <input type="radio" name="rm_group_activation_strategy" value="0" />
                                                <span data-i18n="Natural order">Natural order</span>
                                            </label>
                                            <label class="checkbox_label flexnowrap whitespacenowrap">
                                                <input type="radio" name="rm_group_activation_strategy" value="1" />
                                                <span data-i18n="List order">List order</span>
                                            </label>
                                        </div>
                                        <div class="">
                                            <label class="checkbox_label whitespacenowrap">
                                                <input id="rm_group_allow_self_responses" type="checkbox" />
                                                <span data-i18n="Allow self responses">Allow self responses</span>
                                            </label>
                                            <label id="rm_group_automode_label" class="checkbox_label whitespacenowrap">
                                                <input id="rm_group_automode" type="checkbox" />
                                                <span data-i18n="Auto Mode">Auto Mode</span>
                                            </label>
                                        </div>
                                    </div>
                                    <div id="GroupFavDelOkBack" class="flex-container flexGap5 spaceEvenly flex1">
                                        <div id="rm_button_back_from_group" class="heightFitContent margin0 menu_button fa-solid fa-left-long"></div>
                                        <div id="rm_group_scenario" class="heightFitContent margin0 menu_button fa-solid fa-scroll" title="Set a group chat scenario" data-i18n="[title]Set a group chat scenario"></div>
                                        <div id="group_favorite_button" class="heightFitContent margin0 menu_button fa-solid fa-star" title="Add to Favorites" data-i18n="[title]Add to Favorites"></div>
                                        <input id="rm_group_fav" type="hidden" />
                                        <div id="rm_group_submit" class="heightFitContent margin0 menu_button fa-solid fa-check" title="Create" data-i18n="[title]Create"></div>
                                        <div id="rm_group_restore_avatar" class="heightFitContent margin0 menu_button fa-solid fa-images" title="Restore collage avatar" data-i18n="[title]Restore collage avatar"></div>
                                        <div id="rm_group_delete" class="heightFitContent margin0 menu_button fa-solid fa-trash-can" title="Delete" data-i18n="[title]Delete"></div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="inline-drawer wide100p flexFlowColumn">
                        <div id="groupCurrentMemberListToggle" class="inline-drawer-toggle inline-drawer-header">
                            <span data-i18n="Current Members">Current Members </span><i id="groupCurrentMemberPopoutButton" class="fa-solid fa-window-restore menu_button"></i>
                            <div class="fa-solid fa-circle-chevron-down inline-drawer-icon down"></div>
                        </div>
                        <div class="inline-drawer-content">
                            <div name="Current Group Members" class="flex-container flexFlowColumn overflowYAuto flex1">
                                <div id="rm_group_members" class="overflowYAuto flex-container"></div>
                            </div>
                        </div>
                    </div>
                    <div class="inline-drawer wide100p flexFlowColumn">
                        <div id="groupAddMemberListToggle" class="inline-drawer-toggle inline-drawer-header">
                            <span data-i18n="Add Members">Add Members</span>
                            <div class="fa-solid fa-circle-chevron-down inline-drawer-icon down"></div>
                        </div>
                        <div class="inline-drawer-content">
                            <div name="Unadded Char List" class="flex-container flexFlowColumn overflowYAuto flex1">
                                <div id="rm_group_add_members_header">
                                    <input id="rm_group_filter" class="text_pole margin0" type="search" data-i18n="[placeholder]Filter..." placeholder="Filter..." maxlength="100" />
                                </div>
                                <div class="rm_tag_controls">
                                    <div class="tags rm_tag_filter"></div>
                                </div>
                                <div id="rm_group_add_members" class="overflowYAuto flex-container"></div>
                            </div>
                        </div>
                    </div>
                </div>


                <div id="rm_character_import" class="right_menu" style="display: none;">
                    <form id="form_import" action="javascript:void(null);" method="post" enctype="multipart/form-data">
                        <input multiple type="file" id="character_import_file" accept=".json, image/png, image/webp" name="avatar">
                        <input id="character_import_file_type" name="file_type" class="text_pole" maxlength="999" size="2" value="" autocomplete="off">
                    </form>
                </div>

                <div name="Character List Panel" id="rm_characters_block" class="right_menu">
                    <div id="charListFixedTop">
                        <form id="form_character_search_form" action="javascript:void(null);">
                            <div id="rm_button_create" title="Create New Character" data-i18n="[title]Create New Character" class="menu_button fa-solid fa-user-plus "></div>
                            <div id="character_import_button" title="Import Character from File" data-i18n="[title]Import Character from File" class="menu_button fa-solid fa-file-arrow-up faSmallFontSquareFix"></div>
                            <div id="external_import_button" title="Import content from external URL" data-i18n="[title]Import content from external URL" class="menu_button fa-solid fa-cloud-arrow-down faSmallFontSquareFix"></div>
                            <div id="rm_button_group_chats" title="Create New Chat Group" data-i18n="[title]Create New Chat Group" class="menu_button fa-solid fa-users-gear "></div>
                            <input id="character_search_bar" class="text_pole width100p" type="search" data-i18n="[placeholder]Search..." placeholder="Search..." maxlength="50" />
                            <select id="character_sort_order" title="Characters sorting order" data-i18n="[title]Characters sorting order">
                                <option data-field="name" data-order="asc" data-i18n="A-Z">A-Z</option>
                                <option data-field="name" data-order="desc" data-i18n="Z-A">Z-A</option>
                                <option data-field="date_added" data-order="desc" data-i18n="Newest">Newest</option>
                                <option data-field="date_added" data-order="asc" data-i18n="Oldest">Oldest</option>
                                <option data-field="fav" data-order="desc" data-rule="boolean" data-i18n="Favorites">Favorites</option>
                                <option data-field="date_last_chat" data-order="desc" data-i18n="Recent">Recent</option>
                                <option data-field="chat_size" data-order="desc" data-i18n="Most chats">Most chats</option>
                                <option data-field="chat_size" data-order="asc" data-i18n="Least chats">Least chats</option>
                                <option data-field="name" data-order="random" data-i18n="Random">Random</option>
                            </select>
                        </form>
                        <div class="rm_tag_controls">
                            <div class="tags rm_tag_filter"></div>
                        </div>
                        <!-- a div containing a dynamically updated count of characters currently displayed -->
                        <div class="flex-container alignitemscenter">
                            <div id="rm_character_count"></div>
                            <i id="charListGridToggle" class="fa-solid fa-table-cells-large menu_button" title="Toggle character grid view"></i>
                        </div>
                        <hr>
                    </div>

                    <div id="rm_print_characters_block" class="flexFlowColumn"></div>
                </div>

                <!-- only displays after creating/deleting a character/group -->
                <div id="rm_info_block" class="right_menu">
                    <div id="rm_info_panel">
                        <div id="rm_info_avatar"></div>
                        <div id="rm_info_text"></div>
                        <div id="rm_info_button" class="menu_button" data-i18n="Back">Back</div>
                    </div>
                </div>

            </nav>
        </div>

    </div>
    <!-- various fullscreen popups -->
    <div id="shadow_popup">
        <div id="dialogue_popup">
            <div id="dialogue_popup_holder">
                <div id="dialogue_popup_text">
                    <h3>text</h3>
                </div>
                <textarea id="dialogue_popup_input" class="text_pole" rows="1"></textarea>
                <div id="dialogue_popup_controls">
                    <div id="dialogue_popup_ok" class="menu_button" data-i18n="Delete">Delete</div>
                    <div id="dialogue_popup_cancel" class="menu_button" data-i18n="Cancel">Cancel</div>
                </div>
            </div>
        </div>
    </div>
    <div id="character_popup" class="flex-container flexFlowColumn flexNoGap">

        <div id="character_popup_text">
            <h3 id="character_popup_text_h3"></h3> <span data-i18n="Advanced Defininitions">- Advanced
                Definitions</span>
        </div>
        <hr class="margin-bot-10px">
        <div id="character_cross" class="fa-solid fa-circle-xmark"></div>

        <div class="inline-drawer">
            <div class="inline-drawer-toggle inline-drawer-header">
                <h4 data-i18n="Prompt Overrides (For OpenAI/Claude/Scale APIs, Window/OpenRouter, and Instruct mode)">
                    Prompt Overrides <small>(For OpenAI/Claude/Scale APIs, Window/OpenRouter, and Instruct mode)</small>
                </h4>


                <div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div>
            </div>
            <div class="inline-drawer-content">
                <small data-i18n="Insert {{original}} into either box to include the respective default prompt from system settings.">Insert {{original}} into either box to include the respective default prompt from system settings.</small>
                <div>
                    <h4 data-i18n="Main Prompt">Main Prompt</h4>
                    <textarea id="system_prompt_textarea" name="system_prompt" data-i18n="[placeholder]Any contents here will replace the default Main Prompt used for this character. (v2 spec: system_prompt)" placeholder="Any contents here will replace the default Main Prompt used for this character.&#10;(v2 spec: system_prompt)" form="form_create" class="text_pole" autocomplete="off" rows="3" maxlength="20000"></textarea>
                </div>
                <div>
                    <h4 data-i18n="Jailbreak">Jailbreak</h4>
                    <textarea id="post_history_instructions_textarea" name="post_history_instructions" data-i18n="[placeholder]Any contents here will replace the default Jailbreak Prompt used for this character. (v2 spec: post_history_instructions)" placeholder="Any contents here will replace the default Jailbreak Prompt used for this character.&#10;(v2 spec: post_history_instructions)" form="form_create" class="text_pole" autocomplete="off" rows="3" maxlength="20000"></textarea>
                </div>
            </div>
        </div>
        <hr>
        <div class="inline-drawer">
            <div class="inline-drawer-toggle inline-drawer-header">
                <h4 data-i18n="Creator's Metadata (Not sent with the AI prompt)">
                    Creator's Metadata
                    <small>(Not sent with the AI Prompt)</small>
                </h4>
                <div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div>
            </div>
            <div class="inline-drawer-content">
                <small data-i18n="Everything here is optional">Everything here is optional</small>
                <div class="flex-container flexnowrap">
                    <div class="flex1">
                        <h4 data-i18n="Created by">Created by</h4>
                        <textarea id="creator_textarea" name="creator" data-i18n="[placeholder](Botmaker's name / Contact Info)" placeholder="(Botmaker's name / Contact info)" form="form_create" class="text_pole" autocomplete="off" rows="2" maxlength="2000"></textarea>
                    </div>
                    <div class="flex1">
                        <h4 data-i18n="Character Version">Character Version</h4>
                        <textarea id="character_version_textarea" name="character_version" data-i18n="[placeholder](If you want to track character versions)" placeholder="(If you want to track character versions)" form="form_create" class="text_pole" autocomplete="off" rows="2" maxlength="200"></textarea>
                    </div>
                </div>
                <div class="flex-container flexnowrap">
                    <div class="flex1">
                        <h4 data-i18n="Creator's Notes">Creator's Notes</h4>
                        <textarea id="creator_notes_textarea" name="creator_notes" data-i18n="[placeholder](Describe the bot, give use tips, or list the chat models it has been tested on. This will be displayed in the character list.)" placeholder="(Describe the bot, give use tips, or list the chat models it has been tested on. This will be displayed in the character list.)" form="form_create" class="text_pole" autocomplete="off" rows="4" maxlength="20000"></textarea>
                    </div>
                    <div class="flex1">
                        <h4 data-i18n="Tags to Embed">Tags to Embed</h4>
                        <textarea id="tags_textarea" name="tags" data-i18n="[placeholder](Write a comma-separated list of tags)" placeholder="(Write a comma-separated list of tags)" form="form_create" class="text_pole" autocomplete="off" rows="4" maxlength="2000"></textarea>
                    </div>
                </div>
            </div>
        </div>
        <hr>
        <div id="personality_div">
            <h4>
                <span data-i18n="Personality summary">Personality summary</span>
                <a href="https://docs.sillytavern.app/usage/core-concepts/characterdesign/#personality-summary" class="notes-link" target="_blank"><span class="note-link-span">?</span></a>
            </h4>
            <textarea id="personality_textarea" name="personality" data-i18n="[placeholder](A brief description of the personality)" placeholder="(A brief description of the personality)" form="form_create" class="text_pole" autocomplete="off" rows="1" maxlength="20000"></textarea>
        </div>

        <div id="scenario_div">
            <h4>
                <span data-i18n="Scenario">Scenario</span>
                <a href="https://docs.sillytavern.app/usage/core-concepts/characterdesign/#scenario" class="notes-link" target="_blank">
                    <span class="note-link-span">?</span>
                </a>
            </h4>
            <textarea id="scenario_pole" name="scenario" data-i18n="[placeholder](Circumstances and context of the interaction)" placeholder="(Circumstances and context of the interaction)" class="text_pole" maxlength="20000" value="" autocomplete="off" form="form_create" rows="1"></textarea>
        </div>

        <div id="talkativeness_div">
            <h4><span data-i18n="Talkativeness">Talkativeness</span></h4>
            <h5 data-i18n="How often the character speaks in group chats!">How often the character speaks in &nbsp;<span class="warning">group chats!</span>
            </h5>
            <input id="talkativeness_slider" name="talkativeness" type="range" min="0" max="1" step="0.05" value="0.5" form="form_create">
            <div class="slider_hint">
                <span data-i18n="Shy">Shy</span>
                <span data-i18n="Normal">Normal</span>
                <span data-i18n="Chatty">Chatty</span>
            </div>
        </div>
        <hr>
        <div id="mes_example_div" class="flex-container flexFlowColumn">
            <div>
                <h4><span data-i18n="Examples of dialogue">Examples of dialogue</span></h4>
                <h5 data-i18n="Important to set the character's writing style.">Important to set the character's writing style. <a href="https://docs.sillytavern.app/usage/core-concepts/characterdesign/#examples-of-dialogue" class="notes-link" target="_blank"><span class="note-link-span">?</span></a></h5>
            </div>
            <textarea id="mes_example_textarea" class="flexGrow" name="mes_example" data-i18n="[placeholder](Examples of chat dialog. Begin each example with START on a new line.)" placeholder="(Examples of chat dialog. Begin each example with &lt;START&gt; on a new line.)" form="form_create" maxlength="20000" rows="6"></textarea>
        </div>
        <div id="character_popup_ok" class="menu_button" data-i18n="Save">Save</div>

    </div>

    <div id="shadow_select_chat_popup">
        <div id="select_chat_popup">
            <div id="select_chat_import"> <!-- import chat popup header -->
                <div id="chat_import_button" class="fa-solid fa-file-arrow-up  menu_button"></div>
                <div id="selectChatPopupHeaderText" class="TxtLrgBoldCenter">
                    <span id="ChatHistoryCharName"></span>
                    <br>
                    <span data-i18n="Chat History">Chat History</span>
                    <a href="https://docs.sillytavern.app/usage/core-concepts/chatfilemanagement/#chat-import" class="notes-link" target="_blank"><span class="note-link-span">?</span></a>
                </div>
                <form id="form_import_chat" action="javascript:void(null);" method="post" enctype="multipart/form-data" style="display: none;">
                    <input type="file" id="chat_import_file" accept=".json, .jsonl" name="avatar">
                    <input id="chat_import_file_type" name="file_type" class="text_pole" maxlength="999" size="2" value="" autocomplete="off" style="display: none;">
                    <input id="chat_import_avatar_url" name="avatar_url" class="text_pole" maxlength="999" size="2" value="" autocomplete="off" style="display: none;">
                    <input id="chat_import_character_name" name="character_name" class="text_pole" maxlength="999" size="2" value="" autocomplete="off" style="display: none;">
                </form>
                <div id="select_chat_cross" class="fa-solid fa-circle-xmark" alt="Close Past Chat Popup"></div>
            </div>

            <div id="select_chat_div">

            </div>
            <div id="load_select_chat_div">
                <div class="fa-solid fa-hourglass fa-spin"></div>
            </div>
        </div>
    </div>

    <div id="background_template" class="template_element">
        <div class="bg_example flex-container" bgfile="" class="bg_example_img" title="">
            <div title="Rename background" bgfile="" class="bg_button bg_example_edit fa-solid fa-pencil"></div>
            <div title="Delete background" bgfile="" class="bg_button bg_example_cross fa-solid fa-circle-xmark"></div>
            <div class="BGSampleTitle">
            </div>
        </div>
    </div>

    <!-- templates for JS to reuse when needed -->
    <div id="context_editor_template" class="template_element">
        <div class="context_editor">
            <h3>Context Template Editor</h3>
            <h4 class="template_name"></h4>

            <div class="inline-drawer wide100p">
                <div class="inline-drawer-toggle inline-drawer-header">
                    Substitution Parameters
                    <div class="fa-solid fa-circle-chevron-down inline-drawer-icon down"></div>
                </div>
                <div class="inline-drawer-content">
                    <i>Click to copy.</i>
                    <ul class="template_parameters_list justifyLeft margin0">
                        <li><code>{{char}}</code> - current character name</li>
                        <li><code>{{user}}</code> - current user name</li>
                        <li><code>{{description}}</code> - character description</li>
                        <li><code>{{scenario}}</code> - character or group scenario</li>
                        <li><code>{{personality}}</code> - character personality</li>
                        <li><code>{{mesExamples}}</code> - message examples</li>
                        <li><code>{{wiBeforeCharacter}}</code> - activated World Info entries (Before Char)</li>
                        <li><code>{{wiAfterCharacter}}</code> - activated World Info entries (After Char)</li>
                        <li><code>{{instructSystemPrompt}}</code> - system prompt (Instruct mode only)</li>
                    </ul>
                </div>
            </div>
            <div>
                <div class="margin-bot-10px wide100p justifyLeft">
                    Story String Template
                </div>
                <textarea class="wide100p textarea_compact story_string_template" rows="8"></textarea>
                <div>
                    <small>Lines containing parameters resolving to an empty value will be removed from the template
                        string.</small>
                </div>
            </div>
            <div>
                <div class="title_restorable">
                    <span>Chat Injections</span>
                    <div title="Add chat injection" data-i18n="[title]Add chat injection" class="menu_button chat_injection_add">
                        <div class="fa-solid fa-plus"></div>
                    </div>
                </div>
                <div class="chat_injections_list flex-container flexFlowColumn flexGap5 wide100p"></div>
            </div>
        </div>
    </div>

    <div id="chat_injection_template" class="template_element">
        <div class="chat_injection flex-container wide100p flexGap5 flexnowrap">
            <input class="chat_injection_text textarea_compact text_pole flex2" data-i18n="[placeholder]Injection text (supports parameters)" placeholder="Injection text (supports parameters)" type="text" />
            <input class="chat_injection_depth textarea_compact text_pole flex1" data-i18n="[placeholder]Injection depth" placeholder="Injection depth" type="number" min="0" max="100" />
            <div title="Remove injection" data-i18n="[title]Remove injection" class="menu_button fa-solid fa-xmark chat_injection_remove"></div>
        </div>
    </div>

    <div id="scenario_override_template" class="template_element">
        <div class="scenario_override range-block flexFlowColumn flex-container">
            <div class="range-block-title title_restorable">
                <h3><span data-i18n="Chat Scenario Override">Chat Scenario Override</span></h3>
                <div title="Remove" data-i18n="[title]Remove" class="menu_button fa-solid fa-trash-can remove_scenario_override"></div>
            </div>
            <div class="range-block-counter justifyLeft flex-container flexFlowColumn">
                <strong>Unique to this chat.</strong>
                <span data-group="true">All group members will use the following scenario text instead of what is specified in their character cards.</span>
                <span data-character="true">The following scenario text will be used instead of the value set in the character card.</span>
                Bookmarks inherit the scenario override from their parent, and can be changed individually after that.
            </div>
            <div class="range-block-range wide100p">
                <textarea class="wide100p chat_scenario" class="text_pole" rows="15" data-i18n="[placeholder]Type here..." placeholder="Type here..."></textarea>
            </div>
        </div>
    </div>

    <div id="character_world_template" class="template_element">
        <div class="character_world range-block flexFlowColumn flex-container">
            <div class="range-block-title">
                <h3>
                    <span data-i18n="Select a World Info file for"> Select a World Info file for <span class="character_name"></span></span>:
                </h3>
            </div>
            <h4 data-i18n="Primary Lorebook">Primary Lorebook</h4>
            <div class="range-block-counter justifyLeft flex-container flexFlowColumn margin-bot-10px">
                <span data-i18n="A selected World Info will be bound to this character as its own Lorebook.">A selected World Info will be bound to this character as its own Lorebook.</span>
                <span data-i18n="When generating an AI reply, it will be combined with the entries from a global World Info selector.">When generating an AI reply, it will be combined with the entries from a global World Info selector.</span>
                <span data-i18n="Exporting a character would also export the selected Lorebook file embedded in the JSON data.">Exporting a character would also export the selected Lorebook file embedded in the JSON data.</span>
            </div>
            <div class="range-block-range wide100p">
                <select class="character_world_info_selector wide100p">
                    <option value="">--- None ---</option>
                </select>
            </div>

            <div class="range-block-title">
                <h4>
                    <span data-i18n="Additional Lorebooks">Additional Lorebooks</span>
                </h4>
            </div>
            <div class="range-block-counter justifyLeft flex-container flexFlowColumn margin-bot-10px">
                <span data-i18n="Associate one or more auxillary Lorebooks with this character.">Associate one or more auxillary Lorebooks with this character.</span><br>
                <span data-i18n="NOTE: These choices are optional and won't be preserved on character export!">NOTE: These choices are optional and won't be preserved on character export!</span>
            </div>
            <div class="range-block-range wide100p">
                <select class="character_extra_world_info_selector wide100p" multiple>
                    <option value="" data-i18n="-- World Info not found --">-- World Info not found --</option>
                </select>
            </div>
        </div>
    </div>

    <div id="past_chat_template" class="template_element">
        <div class="select_chat_block_wrapper">
            <div class="select_chat_block" file_name="">
                <div class="avatar">
                    <img src="">
                </div>
                <div id="select_chat_name_wrapper">
                    <div class="select_chat_block_filename select_chat_block_filename_item"></div>

                    <div class="select_chat_info flex-container">
                        <div class="chat_messages_date"></div>
                        <div class="chat_messages_num select_chat_block_filename_item"></div>
                        <div class="chat_file_size select_chat_block_filename_item"></div>
                    </div>
                </div>

                <div class="select_chat_block_mes"></div>
            </div>
            <div class="flex-container height100pSpaceEvenly">
                <div title="Rename chat file" class="renameChatButton fa-solid fa-pen" data-i18n="[title]Rename chat file"></div>
                <div title="Export JSONL chat file" data-format="jsonl" class="exportRawChatButton fa-solid fa-file-export" data-i18n="[title]Export JSONL chat file"></div>
                <div title="Download chat as plain text document" data-format="txt" class="exportChatButton fa-solid fa-file-lines" data-i18n="[title]Download chat as plain text document"></div>
                <div title="Delete chat file" file_name="" class="PastChat_cross fa-solid fa-circle-xmark" data-i18n="[title]Delete chat file"></div>
            </div>
        </div>
    </div>

    <div id="tag_view_template" class="template_element">
        <div class="tag_view_item">
            <div class="tagColorPickerHolder"></div>
            <div class="tag_view_name" contenteditable="true"></div>
            <div class="tag_view_counter"><span class="tag_view_counter_value"></span>&nbsp;entries</div>
            <div title="Delete tag" class="tag_delete fa-solid fa-trash-can right_menu_button" data-i18n="[title]Delete tag"></div>
        </div>
    </div>


    <div id="entry_edit_template" class="template_element">
        <div class="world_entry">
            <form class="world_entry_form">
                <div class="inline-drawer wide100p">
                    <div class="inline-drawer-toggle inline-drawer-header gap5px">
                        <span class="drag-handle">&#9776;</span>
                        <div class="gap5px world_entry_thin_controls wide100p">

                            <div class="world_entry_form_control flex1">
                                <label for="key">
                                    <small>
                                        <span data-i18n="Keywords">
                                            Keywords
                                        </span>
                                        <span>(UID:&nbsp;
                                            <span class="world_entry_form_uid_value"></span>
                                            )
                                        </span>
                                    </small>
                                    <small class="displayNone">
                                        <span data-i18n="Comma separated (required)">
                                            Comma separated (required)
                                        </span>
                                    </small>
                                </label>
                                <textarea class="text_pole keyprimarytextpole" name="key" rows="1" data-i18n="[placeholder]Comma separated (required)" placeholder="Comma separated (required)" maxlength="1000"></textarea>
                            </div>
                            <div class="flex-container widthFitContent alignItemsFlexEnd">
                                <select name="entryLogicType" class="height32px widthFitContent margin0">
                                    <option value="0">AND</option>
                                    <option value="1">NOT</option>
                                </select>
                            </div>

                            <div class="world_entry_form_control keysecondary flex1">
                                <label for="keysecondary">
                                    <small>
                                        <span data-i18n="Secondary Required Keywords">
                                            Optional Filter
                                        </span>
                                    </small>
                                    <small class="displayNone">
                                        <span data-i18n="Comma seperated (ignored if empty)">
                                            Comma seperated (ignored if empty)
                                        </span>
                                    </small>
                                </label>
                                <textarea class="text_pole keysecondarytextpole" name="keysecondary" rows="1" data-i18n="[placeholder]Comma separated (ignored if empty)" placeholder="Comma separated (ignored if empty)" maxlength="1000"></textarea>
                            </div>
                        </div>
                        <div class="fa-solid fa-circle-chevron-down inline-drawer-icon down"></div>
                    </div>
                    <div class="inline-drawer-content flex-container">
                        <div class="WIEntryContentAndMemo flex-container">
                            <div class="world_entry_thin_controls flex2">
                                <div class="world_entry_form_control flex1">
                                    <label for="content ">
                                        <small>
                                            <span data-i18n="Content">
                                                Content
                                                <span>(Tokens:&nbsp;
                                                    <span class="world_entry_form_token_counter">0</span>
                                                    )
                                                </span>
                                            </span>
                                        </small>
                                        <small class="displayNone">
                                            <span data-i18n="What this keyword should mean to the AI">
                                                What this keyword should mean to the AI, sent verbatim
                                            </span>
                                        </small>
                                    </label>
                                    <textarea class="text_pole" name="content" rows="4" data-i18n="[placeholder]What this keyword should mean to the AI, sent verbatim" placeholder="What this keyword should mean to the AI, sent verbatim"></textarea>
                                </div>
                            </div>
                            <div class="world_entry_thin_controls commentContainer">
                                <div class="world_entry_form_control flex1">
                                    <label for="comment">
                                        <small>
                                            <span data-i18n="Memo/Note">
                                                Memo/Note
                                            </span>
                                        </small>
                                        <small class="displayNone">
                                            <span data-i18n="Not sent to AI">
                                                Not sent to AI
                                            </span>
                                        </small>
                                    </label>
                                    <textarea class="text_pole" rows="4" name="comment" maxlength="2000" data-i18n="[placeholder]Not sent to the AI" placeholder="Not sent to AI"></textarea>
                                </div>
                            </div>
                        </div>
                        <div name="WIEntryBottomControls" class="flex-container flex1 justifySpaceBetween world_entry_form_horizontal">
                            <div class="flex-container flexFlowColumn flexNoGap  wi-enter-footer-text  ">
                                <label class="checkbox flex-container">
                                    <input type="checkbox" name="constant" />
                                    <span data-i18n="Constant">Constant</span>
                                </label>
                                <label class="checkbox flex-container alignitemscenter">
                                    <input type="checkbox" name="disable" />
                                    <span data-i18n="Disable">Disable</span>
                                </label>
                                <label class="checkbox flex-container">
                                    <input type="checkbox" name="selective" />
                                    <span data-i18n="Selective">Selective</span>
                                </label>
                                <label class="checkbox flex-container">
                                    <input type="checkbox" name="useProbability" />
                                    <span data-i18n="Use Probability">Use Probability</span>
                                </label>
                                <label class="checkbox flex-container">
                                    <input type="checkbox" name="addMemo">
                                    <span data-i18n="Add Memo">Add Memo</span>
                                </label>
                                <label class="checkbox flex-container alignitemscenter">
                                    <input type="checkbox" name="exclude_recursion" />
                                    <span data-i18n="Exclude from recursion">
                                        Non-recursable
                                    </span>
                                </label>
                            </div>

                            <!--
                            <div name="injectioStratBlock" class="world_entry_form_control world_entry_form_radios  wi-enter-footer-text ">
                                <label for="injectionStrat">Injection:</label>
                                <small>
                                    <select name="injectionStrat">
                                        <option value="0">Normal</option>
                                        <option value="1">Constant</option>
                                        <option value="2">Disabled</option>
                                    </select>
                                </small>
                            </div>
                         -->

                            <div name="PositionBlock" class="world_entry_form_control world_entry_form_radios  wi-enter-footer-text ">
                                <label for="position" data-i18n="Position:">Position:</label>
                                <small>
                                    <select name="position">
                                        <option value="0" data-i18n="Before Char Defs">Before Char Defs</option>
                                        <option value="1" data-i18n="After Char Defs">After Char Defs</option>
                                        <option value="2" data-i18n="Before AN">Before AN</option>
                                        <option value="3" data-i18n="After AN">After AN</option>
                                    </select>
                                </small>
                            </div>


                            <div class="world_entry_form_control wi-enter-footer-text  flex-container flexNoGap ">
                                <label for="order" data-i18n="Order:">Order:</label>
                                <input class="text_pole wideMax100px margin0" type="number" name="order" placeholder="" />
                            </div>



                            <div class="world_entry_form_control wi-enter-footer-text flex-container flexNoGap probabilityContainer">
                                <label for="probability" data-i18n="Probability:"></label>Probability:</label>
                                <input class="text_pole wideMax100px margin0" type="number" name="probability" placeholder="" min="0" max="100" />
                            </div>

                            <div class="flex-container flexFlowColumn flexNoGap wi-enter-footer-text ">


                            </div>

                            <input class="menu_button delete_entry_button" type="submit" data-i18n="Delete Entry" value="Delete Entry" />
                        </div>
                        <div class="wide100p">
                            <hr>
                        </div>

                    </div>

                </div>
            </form>
        </div>
    </div>
    <div id="character_template" class="template_element">
        <div class="character_select flex-container wide100p alignitemsflexstart" chid="" id="">
            <div class="avatar" title="">
                <img src="">
            </div>
            <div class="flex-container wide100pLess70px character_select_container">
                <div class="wide100p character_name_block">
                    <span class="ch_name"></span>
                    <i class="ch_avatar_url"></i>
                </div>
                <i class="ch_fav_icon fa-solid fa-star"></i>
                <input class="ch_fav" value="" hidden />
                <div class="ch_description"></div>
                <div class="tags tags_inline"></div>
            </div>
        </div>
    </div>

    <div id="tag_template" class="template_element">
        <span id="" class="tag">
            <span class="tag_name"></span>
            <i class="fa-solid fa-circle-xmark tag_remove"></i>
        </span>
    </div>

    <div id="openai_logit_bias_template" class="template_element">
        <div class="openai_logit_bias_form">
            <input class="openai_logit_bias_text text_pole" data-i18n="[placeholder]Type here..." placeholder="type here..." />
            <input class="openai_logit_bias_value text_pole" type="number" min="-100" value="0" max="100" />
            <i class="menu_button fa-solid fa-xmark openai_logit_bias_remove"></i>
        </div>
    </div>

    <div id="message_template" class="template_element">
        <div class="mes" mesid="" ch_name="" is_user="" is_system="" bookmark_link="">
            <div class="for_checkbox"></div><input type="checkbox" class="del_checkbox">
            <div class="mesAvatarWrapper">
                <div class="avatar">
                    <img src="">

                </div>
                <div class="mesIDDisplay"></div>
                <div class="mes_timer"></div>
            </div>
            <div class="swipe_left fa-solid fa-chevron-left"></div>
            <div class="mes_block">
                <div class="ch_name flex-container justifySpaceBetween">
                    <div class="flex-container flex1 alignitemscenter">
                        <span class="name_text">${characterName}</span>
                        <small class="timestamp"></small>
                    </div>

                    <div class="mes_buttons">
                        <div class="extraMesButtonsHint fa-solid fa-ellipsis"></div>
                        <div class="extraMesButtons">
                            <div title="Translate message" class="mes_translate fa-solid fa-language" data-i18n="[title]Translate message"></div>
                            <div title="Generate Image" class="sd_message_gen fa-solid fa-paintbrush" data-i18n="[title]Generate Image"></div>
                            <div title="Narrate" class="mes_narrate fa-solid fa-bullhorn" data-i18n="[title]Narrate"></div>
                            <div title="Prompt" class="mes_prompt fa-solid fa-square-poll-horizontal " data-i18n="[title]Prompt"></div>
                            <div title="Create bookmark" class="mes_create_bookmark fa-regular fa-code-branch" data-i18n="[title]Create Bookmark"></div>
                            <div title="Copy" class="mes_copy fa-solid fa-copy " data-i18n="[title]Copy"></div>
                        </div>
                        <div title="Open bookmark chat" class="mes_bookmark fa-solid fa-bookmark" data-i18n="[title]Open bookmark chat"></div>
                        <div title="Edit" class="mes_edit fa-solid fa-pencil " data-i18n="[title]Edit"></div>
                    </div>
                    <div class="mes_edit_buttons">
                        <div class="mes_edit_done menu_button  fa-solid fa-check" title="Confirm" data-i18n="[title]Confirm"></div>
                        <div class="mes_edit_copy menu_button  fa-solid fa-copy" title="Copy this message" data-i18n="[title]Copy this message"></div>
                        <div class="mes_edit_delete menu_button  fa-solid fa-trash-can" title="Delete this message" data-i18n="[title]Delete this message">
                        </div>
                        <div class="mes_edit_up menu_button  fa-solid fa-chevron-up " title="Move message up" data-i18n="[title]Move message up"></div>
                        <div class="mes_edit_down menu_button  fa-solid fa-chevron-down" title="Move message down" data-i18n="[title]Move message down">
                        </div>
                        <div class="mes_edit_cancel menu_button  fa-solid fa-xmark" title="Cancel" data-i18n="[title]Cancel"></div>
                    </div>
                </div>
                <div class=mes_text></div>
                <div class="mes_img_container">
                    <div class="mes_img_controls">
                        <div title="Enlarge" class="right_menu_button fa-lg fa-solid fa-magnifying-glass mes_img_enlarge" data-i18n="[title]Enlarge"></div>
                        <div title="Delete" class="right_menu_button fa-lg fa-solid fa-trash-can mes_img_delete" data-i18n="[title]Delete"></div>
                    </div>
                    <img class="mes_img" src="" />
                </div>
                <div class="mes_bias"></div>
            </div>
            <div class="swipe_right fa-solid fa-chevron-right">
                <div class="swipes-counter"></div>
            </div>
        </div>
    </div>
    <div id="group_avatars_template" class="template_element">
        <div class="avatar avatar_collage collage_1">
            <img alt="img1" class="img_1" src="">
        </div>
        <div class="avatar avatar_collage collage_2">
            <img alt="img1" class="img_1" src="">
            <img alt="img2" class="img_2" src="">
        </div>
        <div class="avatar avatar_collage collage_3">
            <img alt="img1" class="img_1" src="">
            <img alt="img2" class="img_2" src="">
            <img alt="img3" class="img_3" src="">
        </div>
        <div class="avatar avatar_collage collage_4">
            <img alt="img1" class="img_1" src="">
            <img alt="img2" class="img_2" src="">
            <img alt="img3" class="img_3" src="">
            <img alt="img4" class="img_4" src="">
        </div>
    </div>

    <div id="group_member_template" class="template_element">
        <div class="group_member">
            <div class="avatar">
                <img alt="Avatar" src="" />
            </div>
            <div class="group_member_name">
                <div class="ch_name"></div>
                <div class="tags tags_inline"></div>
            </div>
            <input class="ch_fav" value="" hidden />
            <div class="group_member_icon">
                <div title="Temporarily disable automatic replies from this character" data-action="disable" class="right_menu_button fa-solid fa-lg fa-comment-slash" data-i18n="[title]Temporarily disable automatic replies from this character"></div>
                <div title="Enable automatic replies from this character" data-action="enable" class="right_menu_button fa-solid fa-lg fa-comment-slash" data-i18n="[title]Enable automatic replies from this character"></div>
                <div title="Trigger a message from this character" data-action="speak" class="right_menu_button fa-solid fa-lg fa-comment" data-i18n="[title]Trigger a message from this character"></div>
                <div class="flexFlowColumn flex-container">
                    <div title="Move up" data-action="up" class="right_menu_button fa-solid fa-chevron-up" data-i18n="[title]Move up"></div>
                    <div title="Move down" data-action="down" class="right_menu_button fa-solid fa-chevron-down" data-i18n="[title]Move down"></div>
                </div>
                <div title="View character card" data-action="view" class="right_menu_button fa-solid fa-xl fa-image-portrait" data-i18n="[title]View character card"></div>
                <div title="Remove from group" data-action="remove" class="right_menu_button fa-solid fa-2xl fa-xmark" data-i18n="[title]Remove from group">
                </div>
                <div title="Add to group" data-action="add" class="right_menu_button fa-solid fa-2xl fa-plus" data-i18n="[title]Add to group"></div>
            </div>
        </div>
    </div>
    <div id="group_list_template" class="template_element">
        <div class="group_select flex-container wide100p alignitemsflexstart">
            <div class="avatar">
                <img src="">
            </div>
            <div class="flex-container wide100pLess70px gap5px group_name_block">
                <div class="ch_name"></div>
                <i class='group_fav_icon fa-solid fa-star'></i>
                <input class="ch_fav" value="" hidden />
                <div class="tags tags_inline"></div>
            </div>
        </div>
    </div>

    <div id="hotswap_template" class="template_element">
        <div class="hotswapAvatar">
            <img src="/img/ai4.png">
        </div>
    </div>

    <div id="alternate_greetings_template" class="template_element">
        <div class="alternate_grettings flexFlowColumn flex-container">
            <div class="title_restorable">
                <h3><span data-i18n="Alternate Greetings">Alternate Greetings</span></h3>
                <div title="Add" class="menu_button fa-solid fa-plus add_alternate_greeting" data-i18n="[title]Add"></div>
            </div>
            <div class="justifyLeft" data-i18n="Alternate Greetings Subtitle">
                These will be displayed as swipes on the first message when starting a new chat.
                Group members can select one of them to initiate the conversation.
            </div>
            <hr>
            <div class="alternate_greetings_list flexFlowColumn flex-container wide100p">
                <strong class="alternate_grettings_hint margin-bot-10px" data-i18n="Alternate Greetings Hint">
                    Click the <i class="fa-solid fa-plus"></i> button to get started!
                </strong>
            </div>
        </div>
    </div>

    <div id="alternate_greeting_form_template" class="template_element">
        <div class="alternate_greeting">
            <div class="title_restorable">
                <strong>Alternate Greeting #<span class="greeting_index"></span></strong>
                <div class="menu_button fa-solid fa-trash-alt delete_alternate_greeting"></div>
            </div>
            <textarea name="alternate_greetings" data-i18n="[placeholder](This will be the first message from the character that starts every chat)" placeholder="(This will be the first message from the character that starts every chat)" class="text_pole textarea_compact alternate_greeting_text" maxlength="20000" value="" autocomplete="off" rows="4"></textarea>
        </div>
    </div>

    <!-- chat and input bar -->
    <div id="typing_indicator_template" class="template_element">
        <div class="typing_indicator"><span class="typing_indicator_name">CHAR</span> is typing</div>
    </div>
    <div id="movingDivs">
        <div id="floatingPrompt" class="drawer-content flexGap5">
            <div class="panelControlBar flex-container">
                <div id="floatingPromptheader" class="fa-solid fa-grip drag-grabber"></div>
                <div id="ANClose" class="fa-solid fa-circle-xmark"></div>
            </div>
            <div name="floatingPromptHolder">
                <div class="inline-drawer">
                    <div id="ANBlockToggle" class="inline-drawer-toggle inline-drawer-header">
                        <b>Author's Note</b>
                        <div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div>
                    </div>
                    <div class="inline-drawer-content">
                        <small>
                            <b>Unique to this chat</b>.<br>
                            Bookmarks inherit the Note from their parent, and can be changed individually after that.<br>
                        </small>
                        <textarea id="extension_floating_prompt" class="text_pole" rows="8" maxlength="10000"></textarea>
                        <div class="extension_token_counter">
                            Tokens: <span id="extension_floating_prompt_token_counter">0</span>
                        </div>

                        <div class="floating_prompt_radio_group">
                            <label>
                                <input type="radio" name="extension_floating_position" value="0" />
                                After scenario
                            </label>
                            <label>
                                <input type="radio" name="extension_floating_position" value="1" />
                                In-chat @ Depth <input id="extension_floating_depth" class="text_pole widthUnset" type="number" min="0" max="99" />
                            </label>
                        </div>
                        <!--<label for="extension_floating_interval">In-Chat Insertion Depth</label>-->

                        <label for="extension_floating_interval">Insertion Frequency</label>

                        <input id="extension_floating_interval" class="text_pole widthUnset" type="number" min="0" max="999" /><small> (0 = Disable, 1 = Always)</small>
                        <br>

                        <span>User inputs until next insertion: <span id="extension_floating_counter">(disabled)</span></span>
                    </div>
                </div>
                <hr class="sysHR">
                <div class="inline-drawer">
                    <div id="charaANBlockToggle" class="inline-drawer-toggle inline-drawer-header">
                        <b>Character Author's Note</b>
                        <div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div>
                    </div>
                    <div class="inline-drawer-content">
                        <small>Will be automatically added as the author's note for this character. Will be used in groups, but
                            can't be modified when a group chat is open.</small>

                        <textarea id="extension_floating_chara" class="text_pole" rows="8" maxlength="10000" placeholder="Example:\n[Scenario: wacky adventures; Genre: romantic comedy; Style: verbose, creative]"></textarea>
                        <div class="extension_token_counter">
                            Tokens: <span id="extension_floating_chara_token_counter">0</span>
                        </div>

                        <label class="checkbox_label" for="extension_use_floating_chara">
                            <input id="extension_use_floating_chara" type="checkbox" />
                            <span data-i18n="Use character author's note">Use character author's note</span>
                        </label>
                        <div class="floating_prompt_radio_group">
                            <label>
                                <input type="radio" name="extension_floating_char_position" value="0" />
                                Replace Author's Note
                            </label>
                            <label>
                                <input type="radio" name="extension_floating_char_position" value="1" />
                                Top of Author's Note
                            </label>
                            <label>
                                <input type="radio" name="extension_floating_char_position" value="2" />
                                Bottom of Author's Note
                            </label>
                        </div>
                    </div>
                </div>
                <hr class="sysHR">
                <div class="inline-drawer">
                    <div id="defaultANBlockToggle" class="inline-drawer-toggle inline-drawer-header">
                        <b>Default Author's Note</b>
                        <div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div>
                    </div>
                    <div class="inline-drawer-content">
                        <small>Will be automatically added as the Author's Note for all new chats.</small>

                        <textarea id="extension_floating_default" class="text_pole" rows="8" maxlength="10000" placeholder="Example:\n[Scenario: wacky adventures; Genre: romantic comedy; Style: verbose, creative]"></textarea>
                        <div class="extension_token_counter">
                            Tokens: <span id="extension_floating_default_token_counter">0</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="sheld">
        <div id="sheldheader" class="fa-solid fa-grip drag-grabber"></div>
        <div id="chat">
        </div>
        <div id="form_sheld">
            <div id="dialogue_del_mes">
                <div id="dialogue_del_mes_ok" class="menu_button">Delete</div>
                <div id="dialogue_del_mes_cancel" class="menu_button">Cancel</div>
            </div>
            <form id="send_form" class="no-connection">
                <div id="options_button" class="fa-solid fa-bars"></div>
                <textarea id="send_textarea" data-i18n="[placeholder]Not connected to API!" placeholder="Not connected to API!" name="text"></textarea>
                <div id="send_but_sheld">
                    <div id="mes_stop" title="Abort request" class="mes_stop" data-i18n="[title]Abort request">
                        <i class="fa-solid fa-circle-stop"></i>
                    </div>
                    <div id="send_but" class="fa-solid fa-paper-plane" title="Send a message" data-i18n="[title]Send a message"></div>
                </div>
            </form>
        </div>
    </div>

    <!-- popups live outside sheld to avoid blur conflicts -->
    <div id="options" class="font-family-reset" style="display: none;">
        <div class="options-content">
            <a id="option_toggle_AN">
                <i class="fa-lg fa-solid fa-note-sticky"></i>
                <span data-i18n="Author's Note">Author's Note</span>
            </a>
            <a id="option_back_to_main">
                <i class="fa-lg fa-solid fa-left-long"></i>
                <span data-i18n="Back to parent chat">Back to parent chat</span>
            </a>
            <a id="option_new_bookmark">
                <i class="fa-lg fa-solid fa-bookmark"></i>
                <span data-i18n="Save bookmark">Save bookmark</span>
            </a>
            <a id="option_convert_to_group">
                <i class="fa-lg fa-solid fa-people-arrows"></i>
                <span data-i18n="Convert to group">Convert to group</span>
            </a>
            <a id="option_start_new_chat">
                <i class="fa-lg fa-solid fa-comments"></i>
                <span data-i18n="Start new chat">Start new chat</span>
            </a>
            <a id="option_select_chat">
                <i class="fa-lg fa-solid fa-address-book"></i>
                <span data-i18n="View past chats">View past chats</span>
            </a>
            <hr>
            <a id="option_delete_mes">
                <i class="fa-lg fa-solid fa-trash-can"></i>
                <span data-i18n="Delete messages">Delete messages</span>
            </a>
            <a id="option_impersonate" title="Ask AI to write your message for you" data-i18n="[title]Ask AI to write your message for you">
                <i class="fa-lg fa-solid fa-user-secret"></i>
                <span data-i18n="Impersonate">Impersonate</span>
            </a>
            <a id="option_continue" title="Continue the last message" data-i18n="[title]Continue the last message">
                <i class="fa-lg fa-solid fa-arrow-right"></i>
                <span data-i18n="Continue">Continue</span>
            </a>
            <a id="option_regenerate">
                <i class="fa-lg fa-solid fa-repeat"></i>
                <span data-i18n="Regenerate">Regenerate</span>
            </a>
        </div>
    </div>

    <div id="export_format_popup" class="list-group">
        <div class="export_format list-group-item" data-format="png">PNG</div>
        <div class="export_format list-group-item" data-format="json">JSON</div>
        <div class="export_format list-group-item" data-format="webp">WEBP</div>
    </div>

    <div id="zoomed_avatar_template" class="template_element">
        <div class="zoomed_avatar">
            <div id="" class="fa-solid fa-grip drag-grabber"></div>
            <img class="zoomed_avatar_img" src="">
        </div>
    </div>

    <div id="rawPromptPopup" class="list-group">
        <div id="rawPromptWrapper" class="tokenItemizingSubclass"></div>
    </div>

    <div id="user_avatar_template" class="template_element">
        <div class="avatar-container">
            <div imgfile="" class="avatar">
                <img src="" alt="User Avatar">
            </div>
            <div class="avatar-buttons avatar-buttons-top">
                <button class="menu_button bind_user_name" title="Bind user name to that avatar" data-i18n="[title]Bind user name to that avatar">
                    <i class="fa-solid fa-user-edit"></i>
                </button>
                <button class="menu_button set_default_persona" title="Select this as default persona for the new chats." data-i18n="[title]Select this as default persona for the new chats.">
                    <i class="fa-solid fa-crown"></i>
                </button>
            </div>
            <div class="avatar-buttons avatar-buttons-bottom">
                <button class="menu_button set_persona_image" title="Change persona image" data-i18n="[title]Change persona image">
                    <i class="fa-solid fa-image"></i>
                </button>

                <button class="menu_button delete_avatar" title="Delete persona" data-i18n="[title]Delete persona">
                    <i class="fa-solid fa-trash-alt"></i>
                </button>
            </div>
        </div>
    </div>

    <script>
        // Configure toast library:
        toastr.options.escapeHtml = true; // Prevent raw HTML inserts
        toastr.options.timeOut = 4000; // How long the toast will display without user interaction
        toastr.options.extendedTimeOut = 10000; // How long the toast will display after a user hovers over it
        toastr.options.progressBar = true; // Visually indicate how long before a toast expires.
        toastr.options.closeButton = true; // enable a close button
    </script>

    <script>
        const documentHeight = () => {
            const doc = document.documentElement
            doc.style.setProperty('--doc-height', `${window.innerHeight}px`)
        }
        window.addEventListener('resize', documentHeight)
        documentHeight()
    </script>
</body>

</html>
